Courses

Vue.js 3 + Laravel 11 + Vite: SPA CRUD

Vue Route Names and Separate File

In this lesson, we will perform some route cleanup in Vue. We will introduce route naming and move the routes into a separate file.


Named Routes

So let's add a name to the routes.

resources/js/app.js:

import './bootstrap';
 
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './layouts/App.vue'
import PostsIndex from './components/Posts/Index.vue'
import PostsCreate from './components/Posts/Create.vue'
 
const routes = [
{
path: '/',
name: 'posts.index',
component: PostsIndex
},
{
path: '/posts/create',
name: 'posts.create',
component: PostsCreate
},
]
 
const router = createRouter({
history: createWebHistory(),
routes
})
 
createApp(App)
.use(router)
.mount('#app')

So how to use them by name now? In the main App layout...

The full lesson is only for Premium Members.
Want to access all 27 lessons of this course? (115 min read)

You also get:

  • 69 courses (majority in latest Laravel 11)
  • Premium tutorials
  • Access to repositories
  • Private Discord