Add VueJS to Laravel but continue using Laravel's router etc

Question

I would like to add VueJS to my multi-page-application based on Laravel.

Well - Vue offers a lot, but I would really love to continue using Laravel's routing mechanism and only add VueJS to enhance my project.

So my question is: As Laravel comes with app.js including a basic Vue-scaffolding, I would not be able to add different behaviors for different pages:

resources/assets/js/app.js:

require('./bootstrap');

window.Vue = require('vue');


Vue.component('example-component', require('./components/ExampleComponent.vue'));

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

So am I right if I would add just new .js files for every blade-view? E.g. home.js, register.js and include them in my views?

syam · Accepted Answer · 2018-09-15 14:09:21Z

Writing Vue Components

By default, fresh Laravel applications contain an ExampleComponent.vue Vue component located in the resources/assets/js/components directory. The ExampleComponent.vue file is an example of a single file Vue component which defines its JavaScript and HTML template in the same file. Single file components provide a very convenient approach to building JavaScript driven applications. The example component is registered in your app.js file:

Vue.component(
    'example-component',
    require('./components/ExampleComponent.vue')
);

To use the component in your application, you may drop it into one of your HTML templates. For example, after running the make:auth Artisan command to scaffold your application's authentication and registration screens, you could drop the component into the home.blade.php Blade template:

@extends('layouts.app')

@section('content')
    <example-component></example-component>
@endsection

But isn't the app.js a really large file if I add all components to this file, even if I need all the components on a specific page?

Collectives™ on Stack Overflow

Add VueJS to Laravel but continue using Laravel's router etc

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related