I’ve a NuxtJS app and want to include a file called app.js (located in assets/js/app.js).
Contents of that file:
// imports from node_modules
import 'focus-visible';
import 'other-package';
…
What I am doing at the moment is to import that packages inside layouts/default.vue … but it doesn’t feel right.
How would you do it?
Importing the assets file is no different than importing any other JavaScript file from another src directory:
import '#/assets/js/app'
It's hard to say whether this usage is "right" without more context, but I don't see anything wrong with doing that.
I am using #vue/cli 4.5.8; "sass-loader": "^8.0.2"
I am trying to make an scss file globally accessible in the vue project.
I made a scss file called style.scss. This file include varible.scss, mixin.scss and bootstrap.scss. All sass files are in /scss folder.
Now in My main.js I import "./scss/style.scss". But it doesn't work. I got sass error: variable undefined.
I know we can use sass-loader to make the style.scss globally available by setup vue.config.js, but I just want to know could this method work, because I've see people on the stackoverflow mentioned this approch.
I'm attempting to import the contents of a YAML file at build-time, and make the parsed content available to my application somehow.
This is in a Webpack project that I've been tasked with building a new feature for. The project is using Vue. I have pretty much 0 experience with Webpack. I've installed the js-yaml-loader package, and have configured Webpack with it as such:
module: {
rules: [
...,
{
test: /\.ya?ml$/,
include: path.resolve(process.cwd(), 'src/data'),
loader: 'js-yaml-loader'
},
...
]
}
As far as I understand it, this will - at build time - traverse the src/data folder for YAML files, and load them, using the js-yaml-loader loader, which will then somehow include the parsed content of those files somewhere. But when I search the generated output, the keys/values contained in the YAML are nowhere to be found.
Am I going about this correctly? Or is there something I've misunderstood?
This is how I solved it with Vue + TypeScript:
Create a yaml file e.g. test.yaml.
Create typings for it with e.g. test.yaml.d.ts, register it to be used with js-yaml-loader e.g.:
declare module 'js-yaml-loader!*' {
export interface TestYaml {
testProperty: string;
}
const content: TestYaml ;
export default content;
}
Import it using import { MyYamlFile} from 'js-yaml-loader!./../test.yaml';
Example:
application.yaml the YAML file
application.d.ts the typings file
ApplicationParser.ts file importing the yaml file
You need to import your .yaml file in some source file in your project.
You can imagine webpack loaders defined in module.rules as some scripts or programs that will run when you are trying to import a file fulfilling some pattern (test property) (there can be also another condition that should be fulfilled, e.g. your include condition). The loader will take your file as an input and provide some output.
So you need to import your file, e.g. in some of your .js file:
import myYamlFile from './file.yml';
Then according to js-yaml-loader documentation you have your file as a javascript object in variable myYamlFile, see the documentation of js-yaml parser:
https://github.com/nodeca/js-yaml
In the end, I didn't even have to modify the Webpack config. I just did this:
import TextData from 'js-yaml-loader!../data/texts.yaml';
import Texts from './vue/plugins/texts';
Vue.use(Texts, {
texts: TextData,
});
Which imports the text data as a JS oject and injects in into the options for my Texts Vue plugin.
I had a similar challenge (loading yaml files in vuejs at build time), and I used vue-cli-plugin-yaml.
No webpack configuration needed, and once installed you can import the files easily.
import myData from './myData.yaml';
console.log(myData);
I have a basic project in VS code, and quite a simple task. I want to include an old javascript file in my project the correct way, so it gets loaded in the browser.
The file should be located in src\assets\scripts\oldLegacyScript.js
I tried this hack: How to add external JS scripts to VueJS Components which injects a <source> tag in the document on runtime. This only works if I put the .js file in the generated public folder in where the compiled files will be. If the file is not in the public folder the browser tries to download the index.html file, which I cannot understand:
If i follow this solution: Importing javascript file for use within vue component I get syntax errors on the import statement:
So how the heck do I overcome this simple task of importing a simple javascript file in my Vue project?
Import like this
<script>
import * as myKey from '.src/..';
export default {
}
</script>
I am trying to create a Vue.js component library, which will later be released on npm for future projects of mine to use it. However, I would like the components to have default scss variables, AKA variables marked with the !default flag. Then, whenever I use the component library in a new project I would like to have the ability for the component library to use a unique scss file which may contain overwrites to the scss variables.
I know to add scss file to the libraries vue.config.js file (I am using vue-cli 3) for each component to pull in that file. However, I cannot figure out how to have vue's configuration to use both the default varaiables file and a project's variables file to "merge" the scss variables. This may be more of a webpack question than a vue question.