Home » Php » Vuejs js for multiple pages not for a single page application

Vuejs js for multiple pages not for a single page application

Posted by: admin November 29, 2017 Leave a comment

Questions:

I need to build an application using laravel 5.3 and vuejs 2, because of I need to use two way binding rather than use jquery.

I need to do views with blade templates. Now i need to use vuejs in each pages 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 has 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 single js files. They use components for small elements with template, not only js.

Is it possible to use vuejs this way? Should i need use app.js. What is the best way to do this?

Answers:
  1. 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.
  2. Name you main div the same as the file (fileName.php + assets/js/fileName.js).
  3. Use #fileName' as yourel`
  4. in blade use @{{ vue expressions }} to let Blade skip this and allow VueJS handle that.

Done. Good luck!

Questions:
Answers:

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>