CODEWITHSUNDEEP
javascriptlaravelvue.jsvue-component
JaChNo
JaChNo

Reputation: 1563

laravel load vuejs components only on the page i need them

at the moment we are loading all of our components in the app.js using 

Vue.component('ID', path-to-component);

This means if we have a failure in one of the component is breaks all the components.

so is there a way to load the component on the specific page we require them?

I tried pushing it to a stack in the blade but it errors with

Uncaught ReferenceError: require is not defined vuejs

My code is:

@push('scripts')
    <script>
        Vue.component('BookingPayments' ,  require('./components/bookings/bookings-payments'));
    </script>
@endpush

Upvotes: 3

Views: 1148

Answers (2)

Taqi Vaheed
Taqi Vaheed

Reputation: 112

Just use import option:

`Import otherComponent from './component/otherComponent.vue'`

So it is not a global component and is available just in this page.

Upvotes: 0

Lucas Ferreira
Lucas Ferreira

Reputation: 888

I'd suggest you use lucasmazza/page.js to load javascript code only on specific URLs. You can scope your code like:

page.at('payments', () => {
    Vue.component('BookingPayments', require('...'));
});

The library uses a data-page attribute on the body tag.

You can only use the require method on the files being processed by Laravel Mix (webpack).

Upvotes: 1

Related Questions