Quick Start Guide: Laravel 5, vue.js & Bootstrap 3
Written by asked.io
/ 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"
}
}
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
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) {
mix.sass('app.scss');
});
elixir(function(mix) {
mix.browserify('app.js');
});
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
gulp
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 }}
</div>
Test it
php artisan serv
Load http://localhost:8000 and you'll see `Hello Vue World!`
Conclusion
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!