Setup VueJS in Laravel
1. You will need to install javascript dependencies by running the following command on your terminal.
npm install
2. Install some vue libraries that we will need. Run the following command on your terminal.
npm install vue-axios —save
npm install vue-router —save
npm install vue-loader —save
npm install vue-template-compiler —save
3. Create a file named App.vue in resources/assets/js and put the following content in the file.
<template>
<div class="panel panel-default">
<div class="panel-heading">
<nav>
<ul class="list-inline">
<li>
<router-link :to="{ name: 'home' }">Home</router-link>
</li>
<li class="pull-right">
<router-link :to="{ name: 'about' }">About</router-link>
</li> <li class="pull-right">
<router-link :to="{ name: 'contact' }">Contact</router-link>
</li>
</ul>
</nav>
</div>
<div class="panel-body">
<router-view></router-view>
</div>
</div>
</template>
4. Create another files named Home.vue, About.vue, Contact.vue but now in resources/assets/js/components and put the following code in it respective.
Home.vue
<template>
<h1>Laravel 5 Vue Home Page</h1>
</template>
About.vue
<template>
<h1>About</h1>
</template>
Contact.vue
<template>
<h1>Contact</h1>
</template>
5. Then replace the content of the resouces/assets/js/app.js file with the code below.
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import Home from './components/Home.vue';
import Home from './components/About.vue';
import Home from './components/Contact.vue';
Vue.use(VueRouter);
const router = new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/contact',
name: 'contact',
component: Contact
},
]
});
new Vue({
el: '#app',
router: router,
render: app => app(App)
});
6. Next replace the content of the resources/views/welcome.blade.php template file with the code below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div id="app"></div>
</div>
<script src="/js/app.js"></script>
</body>
</html>
7. Now run the following command on your terminal.
npm run dev
npm run watch
1. You will need to install javascript dependencies by running the following command on your terminal.
npm install
2. Install some vue libraries that we will need. Run the following command on your terminal.
npm install vue-axios —save
npm install vue-router —save
npm install vue-loader —save
npm install vue-template-compiler —save
3. Create a file named App.vue in resources/assets/js and put the following content in the file.
<template>
<div class="panel panel-default">
<div class="panel-heading">
<nav>
<ul class="list-inline">
<li>
<router-link :to="{ name: 'home' }">Home</router-link>
</li>
<li class="pull-right">
<router-link :to="{ name: 'about' }">About</router-link>
</li> <li class="pull-right">
<router-link :to="{ name: 'contact' }">Contact</router-link>
</li>
</ul>
</nav>
</div>
<div class="panel-body">
<router-view></router-view>
</div>
</div>
</template>
4. Create another files named Home.vue, About.vue, Contact.vue but now in resources/assets/js/components and put the following code in it respective.
Home.vue
<template>
<h1>Laravel 5 Vue Home Page</h1>
</template>
About.vue
<template>
<h1>About</h1>
</template>
Contact.vue
<template>
<h1>Contact</h1>
</template>
5. Then replace the content of the resouces/assets/js/app.js file with the code below.
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import Home from './components/Home.vue';
import Home from './components/About.vue';
import Home from './components/Contact.vue';
Vue.use(VueRouter);
const router = new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/contact',
name: 'contact',
component: Contact
},
]
});
new Vue({
el: '#app',
router: router,
render: app => app(App)
});
6. Next replace the content of the resources/views/welcome.blade.php template file with the code below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div id="app"></div>
</div>
<script src="/js/app.js"></script>
</body>
</html>
7. Now run the following command on your terminal.
npm run dev
npm run watch
