Laravel 10 Vue 3 JS Router Tutorial

Vue 3 router in laravel 10; In this tutorial, you will learn how to install, configure and set up Vue 3 js router in laravel 10 web applications.

In this tutorial guide, we will take a simple example to demonstrate the installation, setup and use of Vue 3 Router for client-side routing in a Laravel 10 application.

Laravel 10 Vue 3 JS Router Tutorial

Steps to install, configure and setup Vue 3 js router in laravel 10 web applications.

Step 1: Create a New Laravel Project
Step 2: Install Vue and Vue 3 Router
Step 3: Set up Vue Router
Step 4: Create Vue Components
Step 5: Update Blade Layout
Step 6: Compile Assets
Step 7: Create Routes
Step 8: Test Your Application

Step 1: Create a New Laravel Project

First of all, open your cmd or terminal and run the following command into it to create a new laravel project:

composer create-project --prefer-dist laravel/laravel laravel-vue-router
cd laravel-vue-router

Step 2: Install Vue and Vue 3 Router

Once you have created a new laravel project. Now you need to install Vue js and vue router into your laravel project. So open the terminal or cmd and run the following command into it:

npm install vue@3 vue-router@4

Step 3: Set up Vue Router

Once you have installed the router into your Laravel project, you need to set up router like the following:

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue';
import Home from './components/Home.vue';
import About from './components/About.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ],
});

const app = createApp(App);
app.use(router);

app.mount('#app');

Step 4: Create Vue Components

Next, you need to create vue components for router in laravel project. So, go to resources/js folder, create two Vue components for the Home and About pages:

Create Home.vue in resources/js/components:

<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to our website!</p>
  </div>
</template>

Create About.vue in resources/js/components:

<template>
  <div>
    <h1>About Us</h1>
    <p>We are a creative team with a passion for coding!</p>
  </div>
</template>

Step 5: Update Blade Layout

Once you have created vue components. Then open the resources/views/welcome.blade.php file and add a <div> element with the id="app" to load your Vue application. Make sure it looks like this:

<!DOCTYPE html>
<html>
<head>
    <!-- ... -->
</head>
<body>
    <div id="app"></div>
    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

Step 6: Compile Assets

Now, compile your assets using Laravel Mix. In your terminal, run:

npm run dev

Step 7: Create Routes

Now, you need to open the routes/web.php file and define the routes for your home and about pages:

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});

Route::get('/about', function () {
    return view('welcome');
});

Step 8: Test Your Application

Finally, run the following command on cmd or terminal to start the Laravel development server:

php artisan serve

Visit http://localhost:8000 in your web browser. You should see your Laravel Vue application with the home page. Navigate to http://localhost:8000/about to see the about page.

Conclusion

Congratulations! You’ve successfully set up a Laravel 10 project with Vue 3 and Vue Router and create home and about us pages with vue js router.