Can I declare global pug variable in Vue - vue.js

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?

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.

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:
vite.config.ts
(global as any).domain = 'example.com';
(global as any).protocol = 'https';
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.

Related

How to specify default values for environment variables in CMakePresets

When using CMakePresets.json the documentation states that I can use either $env{<variable-name>} or $penv{<variable-name>} to query environment variables.
Is it possible to specify a default value in case the environment variable is not set?
Note:
Since the variable that I am trying to set is also inside the presets, I can't handle the issue inside a CMake script.
If default values are not supported is there any workaround with which I could achieve the same inside the presets file?

How do I make Meson object constant?

As explained here, I like to create file objects in subdirs, and library / executables in the top-level file. However, since all the variables end up in global scope, two subdir files could accidentally use the same variable names. For example:
# Top-level meson.build
subdir('src/abc')
subdir('src/def')
# src/abc/meson.build
my_files=files('1.c','2.c')
# src/def/meson.build
my_files=files('3.c','4.c')
I want meson to throw an error when src/def/meson.build tries to assign a value to my_files. Is this possible in Meson 0.50?
Reassigning variables is rather legitimate operation in meson, so it looks as it is not possible to generate error in standard way. One way of avoiding this problem is following some naming rules e.g. according to folders/sub-folders' names (abc_files, def_files in your case).
But if you really need to have variables with the same name and make sure they are not reassigned, you can use is_variable() function which returns true if variable with given name has been assigned. So, place the following assert before each assignment:
assert(not is_variable('my_files'), 'my_files already assigned!!!')
my_files=files('3.c','4.c')

Do I need to declare a global variable inside every external typescript module?

I've been using one global variable called system which is defined in index.ts.
When I was using internal modules that went fine, probably because I started compiling in index.ts with --out.
Now I'm switching to external modules the compiler throws errors for the global variable 'system'.
I kept a single in each file with some .d.ts files for external libs, and I tried adding
declare var system:System
in that shared reference file, but that didnt work.
What does work is adding the declare statement to each file that uses the global variable.
So my question is if this is the way I should do it (declaring in every file), or if there's something I'm missing.
Tnx!
In Visual Studio 2013 (Update 3) the mere presence of system.d.ts is enough in the test I set up...
system.d.ts (I made this up)
interface System {
someStuff(): void;
}
declare var system: System;
afile.ts
class Lower {
constructor(private word: string) {
system.someStuff();
}
}
export = Lower
And I could access system.someStuff(); from anywhere.
If you are using a different IDE, you may need to add:
///<reference path="system.d.ts" />
This hints to the compiler that the definition exists, but doesn't actually import system as an external module (you can use import system = require('system'); if you want to load it like a module, but I don't think that's what you want in this case as you've stated that this is a global variable.

Can you call "require" on a variable?

I have a lua file that will require another lua file to run but I can't hard code the file name. Can i use the require function on a variable or do i need to figure out an alternate approach to what i am doing?
For example
local path = "mypath.txt"
local level = require path
Yes, you can. require "module" is just a syntactic sugar for require("module") that only works if call a function with single argument that is a string or table constructor. Use proper call in form of require(path) and it will work.

Pass a variable to sass from programming language (coldfusion or PHP)

I would like to pass a variable to my sass from coldfusion or php.
Above I declare a var that I need to pass to sass to set a container-size in my _base.sass.
Is there a way to do it?
Use the !default flag in your variable to do this. here's what i mean
// SCSS file
#import "php-variables"; // have php write this file first before compiling
#import "variables"; // custom colors, font-sizes, etc.
// contents of php-variables
$myvar: #f00; // the value you're setting with php
// contents of variables
$myvar: #0f0 !default; // the value to use if php DOESN't override it.
This way you can still have a fallback for if your php code doesn't need to override a var. anything you write in the php file will be declared first. then as long as your variables file uses the !default flag on ALL variables then it won't override the php set ones.
more info here:
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variable_defaults_
I have tested this with the php compiler at http://www.phpsass.com/ and it works.
I think you should be writing directly to the sass file through php/coldfusion. I doubt there is another way to do it.
An easy way to do this would just be to put your variable on your first line in the sass file or something and just overwrite the value using PHP.
The cleanest solution i found was to do the following. In your html file (mine is a Blade template) you can inject your variable ($bodyBgColour):
<style>
:root {
--main-bg-color: {{ $bodyBgColour }}
</style>
Then in your scss file you can use it:
$background-colour: var(--main-bg-color);
And you can subsequently use that sass variable in your classes:
body {
background-color: $background-colour;
}