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

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" } }

Install

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


Originally published at www.laravelfeed.com.

Show your support

Clapping shows how much you appreciated LaravelFeed’s story.