Laravel app with one or multiple Vue instances

Question

Disclaimer: this is not entirely a programming question, i am asking for your opinions. In case this post does not belong here, please let me know and I will remove it.

I am on the process of planning a rather big app using Laravel and VueJS. My main question is what is the best way to do it?

The app will involve users registrations, login, different user roles and permissions, profile pages etc.

Is it a good idea to use Laravel router to load the pages and create multiple Vue instances for each page? i.e. have one Vue instance handle the frontpage, have another Vue instance handle the profile page etc?

Or is it better to create one Vue instance with multiple components and use Laravel purely as API server?

Do you have any tutorials or resources that might help me decide on one approach or the other?

I would appreciate if you give me your view on this.

Thank you for reading :)

===== Update

Thanks for your replies and time you spend on this. I got another question. Lets say I decided to go with MPA and I have 1 Vue app to handle one page, is it possible to use Vue router for each page? for example '/profile page will be rendered by laravel Everything after /profile should be handled by Vue'

Now if I want VueJS to handle routing I put this in web.php

Route::get('/{any?}', function () {
    return view('vueentrypoint');
})->where('any', '[\/\w\.-]*');

Can I do something like

Route::get('/profile/{any?}', function () {
    return view('profileentry');
})->where('any', '[\/\w\.-]*');

Route::get('/user/{any?}', function () {
    return view('userentry');
})->where('any', '[\/\w\.-]*');

It is certainly better to create one Vue app with multiple components and you can do this with the built in vue.js that ships with laravel by using the vue router and telling laravel to inherit the vue router configs. — Kyle Joeckel
– Kyle Joeckel, Commented Feb 12, 2019 at 23:28
You're basically asking if you should build a Vue SPA or an MPA (multi-page app) with Laravel serving the views. There is no correct answer here, it depends on your project requirements. There are successful implementations of both.. — Devon Bessemer
– Devon Bessemer, Commented Feb 12, 2019 at 23:35
"...answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise." — tao
– tao, Commented Feb 13, 2019 at 0:40

Mahodroid · Accepted Answer · 2020-01-29 12:43:16Z

If you need multiple in an Laravel instance, you should separate applications with more than one Vue instances. For example you have a e-commerce web application and you have three area and them is;

Customer Dashboard: Customer information, wish lists, delivery information, bought items, help tickets etc.
E-Commerce Website: Home page, Categories, Lists, Item Reviews and Buy Items
Worker Dashboard: System updates, new items, new categories, new lists, help ticket views etc.

Note: Maybe Customer Dashboard and E-Commerce applications can be one but I love to separate customer dashboard from everything.

That three applications can separate with three Vue instances. And it is not best practice to make new Vue instances for just one page.

Route::get('/w/{any?}', 'SpaController@worker')->where('any', '.*')->name('spa.worker');
Route::get('/c/{any?}', 'SpaController@customer')->where('any', '.*')->name('spa.customer');
Route::get('{any}', 'SpaController@website')->where('any', '.*')->name('spa.website');

Hi @Mahodroid, Can you please share the implementation or code of spa.worker and spa.customer files?
that names are just titles of routes and they are routes to SpaController methods. That methods returns main blade views which has specific vue instances. public function worker() { return view('worker.app'); }

Collectives™ on Stack Overflow

Laravel app with one or multiple Vue instances

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related