Laravel-Vue is a popular full-stack web development framework that combines Laravel, a PHP-based backend framework, with Vue.js, a popular front-end JavaScript library. This combination provides developers with a powerful toolset for building scalable and robust web applications.
Laravel provides a robust set of features for building backend applications, including authentication, routing, database migrations, and more. Vue.js, on the other hand, provides developers with a powerful set of tools for building responsive and dynamic user interfaces. When combined, these two frameworks can provide a powerful platform for building modern web applications.
Installing Laravel-Vue
run the following commands:
1.First, create a laravel project
command: composer create-project laravel/laravel:^9.0 laravel-vue
Note: “^9.0” stands for that version, you can also try the command below to install the latest version,
command: composer create-project laravel/laravel laravel-vue
and “laravel-vue” stands for the project folder name.
2. Next, command: cd laravel-vue
3. Install laravel-ui package
command: composer require laravel/ui
4. Install the frond-end scaffolding using artisan command
command: php artisan ui vue
Note: Before proceeding to step 5, make sure to add.vue() to the webpack.mix file, which can be found inside your Laravel project.
This is what should occur under the file webpack.mix:
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);Note: by adding .vue() on webpack.mix is to avoid error about “ERROR in ./resources/js/components/ExampleComponent.vue 1:0
Module parse failed: Unexpected token (1:0)”
5. Install vue3 and Compile your Fresh Scaffolding
command: npm install && nmp run dev
6. Update the vue-loader
command: npm update vue-loader
We need to update the vue-loader to avoid this error “[webpack-cli] Error: Cannot find module ‘webpack/lib/rules/DescriptionDataMatcherRulePlugin’
Require stack:” while running the command the npm run watch
7. install vue-router
command: npm install vue-router
Note: vue-router is need for routing the intergated laravel-vue modules/webpages
You can installed other dependecies your need on vue3
8. Add a vue component, such as Home.vue, to the resources/js/components folder. Add the following code to Home.vue.
<template>
<div>
Hello World Happy Installation of Laravel9-Vue3
</div>
</template>
<script>
export default {
mounted() {
document.title = "Home";
}
</script>
9. Under the app.js on resources/js replace the code by this:
require('./bootstrap')
import { createApp } from 'vue'
import Home from './components/Home.vue'
import routes from './routes.js'
const app = createApp({})
app.component('home', Home)
app.use(routes)
app.mount('#app')10. Make a file under the resources/js with the name of routes.js and add this code:
import {createWebHistory, createRouter } from 'vue-router';
import Home from './components/Home.vue';
const routes = [
{
path: '/',
name: 'home',
component: Home
},
];
const router = createRouter({
history: createWebHistory(),
routes
});11 .Next, make a blade file under the resources/views with the name of file home.blade.php and add this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<div id="app">
<div>
<home/>
</div>
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>12. Under routes folder, replace the code Route::get of routing on web.php
From this,
Route::get('/', function () {
return view('welcome');
});to this,
Route::get('/{any?}', [
function () {
return view('home');}
])->where('any','.*');13. command: php artisan serve
14. command: npm run watch
Note: npm run watch is need to automatically compile all the changes on your Vue components and assets during development.
Overall, the installation of Laravel-Vue involves setting up two powerful frameworks, Laravel and Vue.js, to work together. Laravel provides a robust backend framework for building web applications, while Vue.js offers an efficient and effective way to build the front-end of the application. The two frameworks work together to create a full-stack web development environment that is well-suited for building modern and complex web applications.