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.
I don’t normally comment, but I was searching for exactly what you’ve posted today, and you had only posted yesterday! Thanks for the tutorial.