In this article I will provide a quick way to configure Laravel 5, Vue.js, and Bootstrap 3 using Elixir.

Step 1: Create a project

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

Step 2: 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" } } ~~~

Step 3: Install

Don't have npm? Install node. ~~~ npm install --global gulp npm install ~~~

Step 4: Edit: resources/assets/sass/app.scss

Uncomment the @import. ~~~ @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap ~~~

Step 5: 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!' } })



Step 6: Append: gulpfile.js
---------------------------

Add the mix for scripts and set versioning up. ~~~
elixir(function(mix) {
    mix.sass('app.scss'); });

elixir(function(mix) {
    mix.browserify('app.js'); });

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

Step 7 Gulp it
-------------