VUE2 component register in Laravel

Question

Laravel(5.8) and VUE work very nice togheter, but my app.js is getting to big.

For example, i have the following app.js:

window.Vue = require('vue');

window.Vue.component('Comp1', require('./components/Comp1.vue').default);
window.Vue.component('Comp2', require('./components/Comp2.vue').default);
window.Vue.component('Comp3', require('./components/Comp3.vue').default);

window.mainApp = new Vue({
  el: '#app'
});

In the real case, I have around 30 components + third party, witch results in a 1.2mb JS for production.

So, I'm tring to break the app.js file in many 'area related' js, just split, so I wuld have someting like:

app.js:

window.Vue = require('vue');
window.mainApp = new Vue({
  el: '#app'
});

appMainComp.js:

window.Vue.component('Comp1', require('./components/Comp1.vue').default);
window.Vue.component('Comp2', require('./components/Comp2.vue').default);

appOtherComp.js:

window.Vue.component('Comp3', require('./components/Comp3.vue').default);

Now, the catch. Everthing that I register after the app.js "window.mainApp = new Vue({ el: '#app'});" do not register.

So, is there a way to register a component after my 'mainApp' is created? Something like

mainApp.addComponent('./components/Comp1.vue');

Or any other way to break the app.js in mutiple files?

If your app.js is getting bigger, maybe its time to consider loose coupling your backend from frontend, its a painful transition, but it pays well in long term. Just saying. — simultsop
– simultsop, Commented Mar 4, 2020 at 16:51

TiddlyWin · Accepted Answer · 2020-02-27 22:40:14Z

6

+50

Instead of splitting up components into groups (interesting idea btw). Could you do something like this? Dynamic Imports in Vue.js

Whenever it’s possible, I’d recommend to use dynamic imports to import components. They will be lazily loaded (by Webpack) when needed.

//Instead of a usual import
import MyComponent from "~/components/MyComponent.js";

//do this
const MyComponent = () => import("~/components/MyComponent.js");

edited Feb 27, 2020 at 22:40

answered Feb 27, 2020 at 22:27

TiddlyWin

1551 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Moisés Over a year ago

Amazing! Sadly the css of the components did not worked. Is there something else that I need to do?

TiddlyWin Over a year ago

When you say the css of the component, are you importing the css or have it scoped?

iH8 · Accepted Answer · 2020-02-26 11:35:48Z

0

You could use stacks:

Blade allows you to push to named stacks which can be rendered somewhere else in another view or layout. This can be particularly useful for specifying any JavaScript libraries required by your child views.

https://laravel.com/docs/6.x/blade#stacks

Parent view:

<head>
    <script src="/app.js"></script>
    @stack('loadComponent')
    <script>
        @stack('addComponent')
    </script>            
</head>

Child view:

@push('loadComponent')
    <script src="..."></script>
@endpush

@push('addComponent')
    app.addComponent(...);
@endpush

edited Feb 26, 2020 at 11:35

answered Feb 26, 2020 at 11:26

iH8

28.8k4 gold badges72 silver badges83 bronze badges

2 Comments

Moisés Over a year ago

that would work, thanks. BUT (always a but.. ^^" ) the components js are better to be imported as async ( <script async src="..."></script> ), so the user can interact with the page right away. In that case my components may or may not be initialized before the 'mainApp', so some components would not work sometimes. That is a good Blade solution, but I believe that I need a JS solution

iH8 Over a year ago

I just c/p-ed the example with script tags straight from the laravel docs but you could use stacks anywhere you want, head, body or load stuff any way you want, require, import etc which can solve your async problem through dependencies.

Collectives™ on Stack Overflow

VUE2 component register in Laravel

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related