Vuejs js for multiple pages, not for a single page application
I need to build an application using laravel 5.3 and vuejs 2, because I need to use two-way binding rather than use jquery.
I need to set up the views with blade templates. Then, I need to use vuejs in each page as mentioned below.
resources/asserts/js/components/List.vue
<script>
const panel = new Vue({
el: '#list-panel',
name: 'list',
data: {
message: 'Test message'
},
methods: {
setMessage: function(){
this.message = 'New message';
}
}
})
</script>
resources/asserts/views/post/index.blade.php
<div id="panel" class="panel panel-default">
<div class="panel-heading">Posts</div>
<div class="panel-body">
<p>{{ message }}</p>
<button v-on:click="setMessage">SET</button>
</div>
</div>
There is Add.vue to create.blade.php etc...
In Add.vue el: '#add-panel'
This is my app.js. I already commented default code like follows.
Vue.component('list', require('./components/List.vue'));
Vue.component('add', require('./components/Add.vue'));
// const app = new Vue({
// el: '#app'
// });
I hardly checked most of documentations and tutorials. But they use a single js file. They use components for small elements with template, not only js.
Is it possible to use vuejs this way? Do I need to use app.js. What is the best way to do this?
Answer
If you want to sprinkle a bit of vuejs within your blade files you have basically two options:
Option #1
Declare global Vue components
Example
// in laravel built in app.js file
Vue.component('foo', require('./components/Foo.vue'));
Vue.component('bar', require('./components/Bar.vue'));
const app = new Vue({
el: '#app'
});
create a main layout file where the root div has an id of #app
// layout.blade.php
<html>
<header></header>
<body>
<div id="app">
@yield('content')
</div>
</body>
</html>
Finally in your views:
//some-view.blade.php
@extends('layout')
@section('content')
<foo :prop="{{ $someVarFromController }}"></foo>
@endsection
Option #2
This is what I am currently using, and gives me more flexibility actually
// in laravel built in app.js file
const app = new Vue({
el: '#app',
components: {
Foo: require('./components/Foo.vue'),
Bar: require('./components/Bar.vue')
}
});
In the layout file you will be using vuejs dynamic components
<html>
<header></header>
<body>
<div id="app">
@if (isset($component))
<component :is={{ $component }} inline-template>
@endif
@yield('content')
@if (isset($component))
</component>
@endif
</div>
</body>
</html>
In your views:
//some-view.blade.php
@extends('layout', ['component' => 'foo'])
@section('content')
// all the vue stuff available in blade
// don't forget to use the @ symbol every time you don't want blade to parse the expression.
// Example: @{{ some.vue.propertie }}
@endsection
And finally you can create the vue components like you always would
// resources/assets/js/components/foo.vue
<script>
export default {
// the component
}
</script>