How to do routing within a laravel project with Vue components

I've followed 'Method 4: Embedded Vue Components in Blade Files' from this tutorial https://vueschool.io/articles/vuejs-tutorials/the-ultimate-guide-for-using-vue-js-with-laravel/

What I don't understand is how the routing is done. It says: "Routing along with everything else will be handled by Laravel on the server-side.". But the example 'welcome.blade.php' has div with an id of app.

Do I need to add to every blade page of am I missing something.

ian_h

8 months ago

Level 20

I would say, unless you need a separate API and frontend, by the sounds of it, you're not looking that way, I would go the Inertia + VueJS route.

If you do want to stick with the vue components in blade templates (this can get messy over time if your site/app requires more and more dynamics).. then you can do that, and the routing is handled in the routes/web.php file by default and yes, you'll need the controller and blade template for each route.

To add more detail to this, what this gives you is the backend (Laravel) handles the heavy lifting of things like routing, authentication, authorisation, etc etc and allows you to build the front end using Vue that's aware of the backend features such as the routing and auth.. so for the routing, you can use the likes of Ziggy from Tighten that hooks nicely into the Vue front end.. so the Laravel named route:

Route::get('/')->name('home');

Can be accessed from the Vue front end with:

<a :href="route('home')">Home</a>

for example.

Using the likes of Breeze as a starter kit has this all built in out of the box and likely the quickest way of getting started.

I guess to answer your actual query, if you look in the routes/web.php you'll see where the welcome template gets rendered in the example route. The element with id="app" is what gets replaced when Vue is added and renders content.

1 like