Calling dynamic components in Vue JS with laravel

Question

I'm trying to build an application on Laravel 5.4 and Vue JS 2.0 I'm having a set of components which are being used in specific page only, right now I'm defining the components globally and using the components tag in blade file, as I said lot components are of no use, so my mix file is getting bigger and I think this might slow down my page rendering. I'm looking for a solution where I can call components dynamically in blade file. Following is my app.js file:

Vue.component('NavBar', require('./components/NavBar.vue'));
Vue.component('HomeBanner', require('./components/HomeBanner.vue'));
Vue.component('PageFooter', require('./components/Footer.vue'));
Vue.component('Categories', require('./components/Categories.vue'));
Vue.component('SubCategory', require('./components/SubCategory.vue'));

const app = new Vue({
    el: '#app'
});

I've a master blade file which have following HTML codes:

<div id="app">
    <nav-bar></nav-bar>
    @yield('content')
    <div class="clearfix"></div>
    <page-footer></page-footer>
</div>

<!-- Core Scripts for Vue Components -->
<script src="{{ asset('js/app.js') }}"></script>

and suppose in index.blade.php I've

@extends('layouts.master')

@section('title', 'HomePage')

@section('content')
    <home-banner></home-banner>
@endsection

and in categories page I'm having:

@extends('layouts.master')

@section('title', 'Select your category')

@section('content')
    <categories></categories>
@endsection

any suggestion how to achieve this.

eduedu87 · Accepted Answer · 2017-05-09 18:16:33Z

Try this:

Create a new file, say, partial.js at the same level of your app.js with this:

window.Vue = require('vue');
Vue.component('categories', require('./components/Categories.vue'));
new Vue({
    el: '#testing'
});

Add the partial.js to the elixir webpack in gulpfile.js. Should look like this:

elixir(mix => {
    mix.sass('app.scss')
       .webpack('app.js')
       .webpack('partial.js');
});

Then in the blade file you want to have this enclose the 'category' tag between a div with id='testing'

After that, import the partials.js script like this:

<script src="/js/partials.js"></script>

I believe the importing here has to be done AFTER using the category component.

Your categories page should end up like this:

@extends('layouts.master')

@section('title', 'Select your category')

@section('content')
    <div id='testing'>
        <categories></categories>
    </div>
    <script src="/js/partials.js"></script>
@endsection

Try it out and let me know, that's how I solved a similar problem in the past. Cheers!

Collectives™ on Stack Overflow

Calling dynamic components in Vue JS with laravel

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related