CODEWITHSUNDEEP
vue.jspug
Александр Чи
Александр Чи

Reputation: 129

Can I declare global pug variable in Vue

I have a .jade source files and want to insert it into Vue app.

In sources I have the following code:

_mixins.jade:

- var domain = "example.com"

index.jade:

include _mixins
title #{domain}

And it, obviously, works.

What I want - is:

App.vue:

- var domain = "example.com"

div#app
  HelloWorld

HelloWorld.vue:

h1 #{domain}

Is it possible at all? Or I'd have to have separate file with mixins and include it to every component, that'd use mixins and global variables?

Upvotes: 1

Views: 555

Answers (2)

Александр Чи
Александр Чи

Reputation: 129

Based on @takeshi-tokugawa-yd's answer.

To add a global variable, you need to add a property to the global object. As soon as you have this field in global, pug will automatically resolve it without the need to touch its configuration.

Here is an example:

  1. vite.config.ts

    (global as any).domain = 'example.com';
(global as any).protocol = 'https';

  2. index.pug

    h1 #{protocol}://#{domain}

Hovewer, it is far from implicitly included mixin with variables as in the question. It's more an ugly hack, because you need to modify the global object. Thus, I think that it's not possible to achieve what I wanted in the question.

Upvotes: 0

Takeshi Tokugawa YD
Takeshi Tokugawa YD

Reputation: 979

Yes. The specific method is dependent on your project building system.

  • If you are using the Vite, define the globals in dedicated property of first parameter of pugPlugin(options, locals) of vite-plugin-pug.
  • If you are using the pug-loader for Webpack, specify your global variables in globals option.
  • If you are using the pug-plugin for Wepback, it has own loader with globals option.

Upvotes: 1

Related Questions