Using multiple js Vue files in Laravel

Question

Guys 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, as I do to use other files . js??

for example: /js/login.js for login /js/Dashboard.js for Dashboard

I need to configure something in webpack.mix.js? if so, how does it look? I’ve started npm install

Answer 1

I’m not sure I understand your question, but a quick answer would be to import these. js in your app.js, but I don’t know if that’s all you want, so it follows a nice structure that I adopted when I work with Vue.js in Lisbon:

Resources/Assets/js/classes You get all the javascript classes you need, for example:

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

Each class is registered globally 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 the Resources/Assets/js/app.js occurs the import of these classes:

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

At the same time, in the app js. Vue.js is instantiated together 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 javascript classes, and use them in the Vue.js components quietly