Using multiple files js Vue in Laravel

Question

Using multiple files js Vue in Laravel

Navigation

#1 by (0 votes)

0

I am using Laravel v5.5 to start a personal project and I will use Vue.js, I did not find a very didactic content on the internet, how do I use other .js files?

example: /js/login.js for login /js/dashboard.js for the dashboard

Do I need to set something up in webpack.mix.js? If yes, how is it? I've already run npm install

vue.js laravel webpack laravel-5

asked by anonymous 16.09.2017 / 01:22

1 answer

Chained list prints in addition to what is inserted Open modal across the screen and not inside the iframe

score 0 · Answer 1

I do not know if I understood your question correctly, but a quick answer would be for you to import these .js into your app.js, but I do not know if that's all you want, so it's a nice structure that I adopted when I work with vue.js in laravel:

resources / assets / js / classes All the javascript classes you need are missing, for example:

Form.js
Utils.js
Errors.js
...

Each class is globally registered within itself:

window.Form = Form;
window.Utils = Utils;
window.Errors = Errors;
...

Example:

export default class Form
{

    constructor(data)
    {
       ...
    }

    reset()
    {       
       ...
    }

    data()
    {
       ...
    }

    submit(method, endPoint)
    {
       ...
    }

    onSuccess(data)
    {
        ...
    }

    onFail(error)
    {
       ...
    }

}

window.Form = Form;

In resources / assets / js / app.js the import of these classes occurs:

import Form from './classes/Form';
import Utils from './classes/Utils';
import Errors from './classes/Errors';
...

At the same time, in app.js Vue.js is instantiated along with its components, which are in resources / assets / js / components , example:

Vue.component('menu-row', require('./components/MenuRow.vue'));
Vue.component('menu-form', require('./components/MenuForm.vue'));

// Root instance
const app = new Vue({
    el : '#app'
});

So you have the freedom to create your classes in javascript, and use them in vue.js components quietly