Ever wondered how to setup Vue in your laravel project.
Laravel
Laravel is a web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things.
Here is a link to their Documentation.
Laravel
Vue
Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Here is the link to their documentation.
Vue js
Why use Laravel with Vue
Streamline the Development Process
This structure allows for one to be a full stack developer within a single project
Single-Page Application Development
Both Vue js and Laravel support single page applications.This allows the application assets get loaded once, all that your application does as the user engages with it is request data which typically requires low bandwidth to fulfill.
Building Optimal Complex Front-end Pages
With Vuejs a developer does not need to use jquery to manipulate blade templates.Vue allows for easier managment of DOM using a virtual Dom.
Easy to Learn and Use
Both Laravel and Vue have a robust documentation that is easy to learn and integrate.
First ensure that Laravel is installed.
Here is link to install Laravel if you haven't.
Laravel 8 Installation
Create a laravel project
composer create-project laravel/laravel laravel-vue
Scaffolding Vue js
Install laravel/ui package
composer require laravel/ui
Install the frontend scaffolding using the ui Artisan command
Basic scaffolding
php artisan ui vue
Generate Auth scaffolding.
php artisan ui vue
Compile your fresh scaffolding.
npm install && npm run dev
Configure Blade
Import app.js and add app id
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel Vue</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<main class="py-3">
<h3>Laravel Vue</h3>
<router-view></router-view>
</main>
</div>
</body>
</html>
Add Vue components
Add new vue.js file in resources/js/components called app.vue and add the following code.
<template>
<div>
{{message}}
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello World'
}
}
};
</script>
Setup Vue router
Install Vue router
npm install vue-router --save
Create a routes folder and add a home.js file.Add the following code.
const home = () =>import ( '../components/app.vue')
export default [
{
path: '/home',
component: home,
name: 'home',
},
]
Head over to the resources/js folder and create a file called routes.js and add the following code.
import Vue from 'vue'
import VueRouter from 'vue-router'
import home from './routes/home';
Vue.use(VueRouter);
export default new VueRouter({
mode: 'history',
scrollBehavior: (to, from, savedPosition) => ({ y: 0 }),
routes: [
...home,
],
});
Add routes to app.js
Replace the code in your resources/js/app.js with the code below.
require('./bootstrap');
require('../sass/app.scss')
import Vue from 'vue'
window.Vue = require('vue');
// router
import router from './routes.js';
window.router = router;
window.Fire = new Vue();
const app = new Vue({
el: '#app',
router,
}).$mount('#app');
Setup Laravel routes
Update Laravel routes in web.php
Route::get('/{any?}', [
function () {
return view('welcome');
}
])->where('any', '.*');
Run the application
Start Laravel app
php artisan serve
Compile components
npm run dev
Top comments (10)
This begs the question of why use laravel? Vue is a framework all on its own and it would seem you could just do everything in vue.
PHP does a lot of things far better than JS. One of those things is interacting with the database. Another is managing concurrency and load on the server.
JS is good for swishy, swirly effects and asynchronous requests to switch out part of the DOM, but heavy lifting still needs to be done by real, server-side languages.
By the way, you don't need a framework. Vanilla JS is a lot lighter and faster. It's ironic that most "Javascript developers" are terribly unskilled with actual JS.
dude...
Totally amazing. There are a couple more benefits of Laravel and Vue JS which I have covered in a separate article: Laravel and Vue Js. Hopefully the developer community will enjoy my content as well.
What if another application wants to make use of the API? Like a mobile app? Would it work?
Yes, it's working pretty nice. I used same back-end made in Laravel with web browsers (Vue) and mobiles (Flutter)
is it not good to use Laravel for serve API (server side) & use Vue separetly ?
Extra cost for both server but if you can its good
Is the command to generate Auth scaffolding correct?
Nop it shoud be :
php artisan ui vue --auth