Courses

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

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...

This lesson is only for Premium Members.
Want to access all lessons of this course?

You also get:

  • 59 courses (1057 lessons, 42 h 44 min total)
  • Premium tutorials
  • Access to repositories
  • Private Discord