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