Quick Start Guide: Laravel 5, vue.js & Bootstrap 3

Written by / Original link on Mar. 21, 2016

Vue.js has been getting a lot of attention lately so I've decided to give it another look in a new application I'm building. Vue.js is fast, small and easy to use, so why not give it a shot!

Since I'm a Laravel kinda guy I needed to configure vue with L5 and I always use Bootstrap, so that was needed as well.

Did I say Laravel?

I did! So if you don't have a project, make one!

composer create-project --prefer-dist laravel/laravel .

Configure: package.json

Edit the package.json file in your projects folder and make it read:

  "private": true,
  "devDependencies": {
    "gulp": "^3.8.8"
  "dependencies": {
    "bootstrap-sass": "^3.0.0",
    "laravel-elixir": "^4.0.0",
    "vue": "^1.0.18",
    "vue-resource": "^0.7.0"


Don't have npm? Install node.

npm install --global gulp
npm install

Edit: resources/assets/sass/app.scss

Uncomment the @import.

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap

Create: resources/assets/js/app.js

You'll be storing your vue.js, or any other js, here.

import Vue from 'vue'

new Vue({
  el: 'body',
  data: {
  message: 'Hello Vue World!'

Append: gulpfile.js

Add the mix for scripts and set versioning up.

elixir(function(mix) {

elixir(function(mix) {

elixir(function(mix) {
    mix.version(['css/app.css', 'js/app.js']);

Gulp it

Compile all your crap into one css and one js file :D


Edit: resources/views/welcome.blade.php

Add the css in the <head></head> tag.

<link rel="stylesheet" href="{{ elixir('css/app.css') }}">

Add the js before the </body> tag

<script src="{{ elixir('js/app.js') }}"></script>

After the .title div add the div for your message.

<div class="title">Laravel 5</div>
<div id="app">
  @{{ message }}

Test it

php artisan serv

Load http://localhost:8000 and you'll see `Hello Vue World!`



5mins later you now have vue.js, bootstrap and laravel all configured. This guide won't go into any details because that's up to you to figure out. You now have a working base to develop as you desire, so enjoy!


« Laravel 5: Social Authentication with Socialite - Using Google Calendar as a Bill Reminder App »