Courses

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.

create posts page


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

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