Vuejs js for multiple pages, not for a single page application
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 fileVue.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>@endsectionOption #2
This is what I am currently using, and gives me more flexibility actually
// in laravel built in app.js fileconst 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 }}@endsectionAnd finally you can create the vue components like you always would
// resources/assets/js/components/foo.vue<script>export default { // the component}</script>
- Create your 'app' for every page in seperate JS files. Good practice would be using the same name as page name to get it clear where it belongs.
- Name you main div the same as the file (fileName.php + assets/js/fileName.js).
- Use
#fileName' as yourel` - in blade use
@{{ vue expressions }}to let Blade skip this and allow VueJS handle that.
Done. Good luck!