Make include of css and js files with vues

Question

Make include of css and js files with vues

Navigation

#1 by (0 votes)

0

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

vue.js

asked by anonymous 19.01.2018 / 02:23

1 answer

Height of my website Update record on the same page

score 0 · Accepted Answer

Just use 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 upload it in the root folder of the components (src) and look for ...

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

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

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

To import js , I still recommend using import , just declare a class and use it on the page with 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')
}