How to Install and Page Route in Laravel with Vue.js
Laravel is a powerful PHP framework for building web applications. Vue.js is a progressive JavaScript framework for building user interfaces. In this article, we will learn how to install and page route in Laravel with Vue.js.
Installation
First, let’s install Laravel and Vue.js. Make sure you have Composer and Node.js installed on your machine. Then, open your terminal and run the following commands:
composer create-project --prefer-dist laravel/laravel myapp
cd myapp
npm install && npm run dev
These commands will create a new Laravel project and install the necessary dependencies for Vue.js.
Page Route
Now that we have Laravel and Vue.js installed, let’s create a new page route in our application. Open your routes file (routes/web.php) and add a new route for our page:
Route::get('/my-page', function () {
return view('my-page');
});
This code creates a new route that will render a blade view called my-page.blade.php. Next, create the view file in the resources/views directory and add your Vue.js components and templates.
Vue Component
To create a Vue component, you can use the Vue CLI to generate a new component file. In your terminal, run the following command:
vue create my-component
This command will create a new Vue component file in your project. You can then import this component into your blade view and render it on the page.
Conclusion
In this article, we learned how to install and page route in Laravel with Vue.js. By following these steps, you can create a seamless integration between Laravel and Vue.js in your web application.
Great Boss!!
#CMD::
composer create-project –prefer-dist laravel/laravel .
composer require laravel/ui
php artisan ui bootstrap
npm install
npm install vue@next
npm install vue-loader@next
npm install @aacassandra/vue3-progressbar
|
|
|
|
|
|
#FILE:: vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
vue(),
laravel({
input: ['resources/sass/app.scss', 'resources/js/app.js'],
refresh: true,
}),
],
});
|
|
|
|
|
|
#CREATE FILE:: resource/views/app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>
<body>
<div id="app"></div>
</body>
</html>
|
|
|
|
|
|
#UPDATE:: Routes/web.php
<?php
use IlluminateSupportFacadesRoute;
Route::get('{any}', function () {
return view('app');
})->where('any','.*');
|
|
|
|
|
|
#UPDATE:: resources/js/app.js
import './bootstrap';
import { createApp } from 'vue'
import App from './App.vue'
import router from './router.js';
import VueProgressBar from "@aacassandra/vue3-progressbar";
const options = {
color: "red",
failedColor: "#874b4b",
thickness: "5px",
transition: {
speed: "0.2s",
opacity: "0.9s",
termination: 300,
},
autoRevert: true,
location: "top",
inverse: false,
};
const app = createApp(App);
app.use(VueProgressBar, options)
app.use(router);
app.mount('#app');
|
|
|
|
|
|
#CREATE FILE:: resources/js/router.js
import {createWebHistory, createRouter} from "vue-router";
import home from './components/Home.vue'
import contact from './components/Contact.vue'
export const routes = [
{
name: 'home',
path: '/',
component: home
},
{
name: 'contact',
path: '/contact',
component: contact
}
];
const router = createRouter({
history: createWebHistory(),
routes: routes,
});
export default router;
|
|
|
|
|
|
#CREATE FILE:: resources/js/components/Home.vue
<template>
<div class="home">
<h1>{{title}}</h1>
</div>
</template>
<script>
export default {
name: 'home',
data () {
return {
title:'Home Page…'
}
}
}
</script>
<style scoped>
</style>
|
|
|
|
|
|
#CREATE FILE:: resources/js/components/Contact.vue
<template>
<div class="contact">
<h1>{{title}}</h1>
</div>
</template>
<script>
export default {
name: 'contact',
data () {
return {
title:'Contact Page…'
}
}
}
</script>
<style scoped>
</style>
|
|
|
|
|
|
#CREATE FILE:: resources/js/App.vue
<template>
<router-link to="/" class="nav-item nav-link">Home</router-link> ||
<router-link to="/contact" class="nav-item nav-link">Contact</router-link>
<router-view></router-view>
<vue-progress-bar></vue-progress-bar>
</template>
<script>
export default {
mounted() {
this.$Progress.finish();
},
created() {
this.$Progress.start();
this.$router.beforeEach((to, from, next) => {
if (to.meta.progress !== undefined) {
let meta = to.meta.progress;
this.$Progress.parseMeta(meta);
}
this.$Progress.start();
next();
});
this.$router.afterEach((to, from) => {
this.$Progress.finish();
});
},
};
</script>
|
|
|
|
|
|
#CMD::
npm i @vitejs/plugin-vue
npm install vue-axios vue-loader vue-router vue-template-compiler
npm rum dev
php artisan serve