We will try to install the Laravel latest version which comes Vue.js
1 First thing you have to install the composer if you already have not installed in your computer
2 Next you can run following command in your terminal
php composer.phar global require "laravel/installer"
This will download the composer file to install the Laravel project
3 Now you can create the project name Vuetest using the following command
php composer.phar create-project --prefer-dist laravel/laravel blog
4 Then give write permission to storage
and the bootstrap/cache directories
cd vuetest sudo chmod -R 777 storage
Next you have to run the following command in terminal so that it will install the all the packages listed in the packages.json file
npm run install
5 Now you can run the following command to run the web server
php artisan serve
Now you can open your Laravel home page on this URL http://127.0.0.1:8001
Now we will see how you can build Vue component on top this Laravel project
6 Now we will create the Vue components
I am going to create two components called Home and About
Create Home.vue file at resources>js>component
and add the following code
<template> <p> I am at home </p> </template> <script> export default{} </script>
Next you can create the About.vue file at resources>js>component
and add the following code
<template> <p> I am at About </p> </template> <script> export default{} </script>
7 Now we will do the router configuration for Vue components to work
First install the vue-router
npm install vue-router
You can write the router configurations in your app.js file
routes =[ { path:'/', component:Home }, { path:'/', component:About } ]
So your final app.js file have the following code
import Vue from 'vue'; import VueRouter from 'vue-router'; import Home from './components/Home.vue'; import About from './components/About.vue'; Vue.use(VueRouter); window.Vue = require('vue'); const routes =[ { path:'/', component:Home, name:'home' }, { path:'/about', component:About, name:'about' }, ] const router = new VueRouter({ routes }); let app= new Vue({ el:'#app', router })
8 Now you can edit the welcome.blade.php file with the following code
<!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> </head> <body> <div id="app"> <router-link to='/'>Home </router-link> <router-link to='/about'>About </router-link> <router-view></router-view> </div> <script src="{{ asset('js/app.js') }}" > </script> </body> </html>
Here you can see the view-router
which is used to load the components we created
Now you can run the command
npm run watch
This will compile the all vue code and move to app.js
file located at public\js
You can see the output with url URL http://127.0.0.1:8001