Make include css and js files with vuejs

Question

I’m studying the implementation of Windows and vuejs and using as template the admin Lte. My question is: no index.html vuejs, I put all the base css and js files. But when the page requires a specific css and or js file, how do this include in the vuejs Component? Before I was doing everything in one place, now I separated the backend of the frontend. Not always will a js file have an export, especially in these cases web templates. What’s more, there is also the need to import css files to specific pages.

Answer 1

Just use the require Based on Commonjs

For example when importing bootstrap you simply install it and pull with require.

require('bootstrap');

to pull the css

require('bootstrap/dist/css/bootstrap.min.css');

To pull any other file, just climb into the component root folder (src) and search...

require('./css/style.css');

You can use loaders like css-Loader and style-Loader, just install and add the url-Loader

{
   test: /\.(woff|woff2|ttf|svg|eot)$/,
   loader: 'url-loader'
}

To import js, still recommend using the import, just declare a class and use it on the page with the new, example...

class.js

export class Classe{

    constructor(nome){
        this.nome = nome;
    }

}

main.js

import {Classe} from './classe';
new Vue({
    el: '#app',
    data: {
    nome : new Classe('stackOverflow')
}