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

So we have built our first page: list of the posts. Now let's build the second page to add a new post. For this lesson, I will introduce the vue-router.

Installing and Enabling vue-router

First, we need to install the vue-router package.

npm install vue-router@latest

Then, we need to import vue-router.

resources/js/app.js:

import './bootstrap';
 
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router' 
import PostsIndex from './components/Posts/Index.vue'
 
createApp({})
    .component('PostsIndex', PostsIndex)
    .mount('#app')

Then, we need to build a list of routes, initialize the router, and enable that router inside createApp().

Also, we don't need to define components in the createApp() anymore, as they are already defined in the routes.

resources/js/app.js:

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

Vue Component for Second Page

Now, let's create a Vue component for the create post page...