Load Vue components async on Laravel

Question

I have some javascript to run in a blade file but it is waiting for a Vue component to fully load before running.

...
<p id="a"></p>
<my-vue-component></my-vue-component>
...
<script>
  document.getElementById('a').innerText = 'ggg'
</script>

The javascript code waits for the Vue component to load and then it executes.

I don't want the Vue component pausing the rest of the javascript. I want it to load while the rest of the javascript executes or to load after the javascript finishes executing.

I tried installing the dynamic import plugin for async rendering

npm install --save-dev @babel/plugin-syntax-dynamic-import

and registering it in .babelrc

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

and running the compiler

npm run watch

And then in the app.js where the components are registered

Vue.component('my-vue-component', () => import('./components/MyVueComponent.vue').default);

That didn't do what I was expecting

IMPORTANT NOTE: The JS code I want to run before the Vue component is out of the component, i.e. it doesn't belong to the component — Gjaa
– Gjaa, Commented Aug 9, 2019 at 18:05

PtrTon · Accepted Answer · 2019-08-09 04:40:55Z

1

If the javascript you want to load before or during the loading of vue components is related to the vue component itself, then go for the solution posted by @matticusatrd. If you want the javascript executed before loading any vue components, place it in the <head> of your page before your app.js.

Beware, this will make the entire page load wait for the javascript code to execute. Additionally you won't have the dom available yet, so you might need to listen to an event like DOMContentLoaded before doing any manipulations to the page.

answered Aug 9, 2019 at 4:40

PtrTon

3,8932 gold badges16 silver badges24 bronze badges

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

Comments

matticustard · Accepted Answer · 2019-08-08 23:13:06Z

0

To run some JavaScript after a Vue component is loaded, you can simply add it to the mounted() method.

export default {
    name: "MyVueComponent",
    ...
    mounted() {
        // everything here runs after the component is loaded
        let a = true;
    }
}

answered Aug 8, 2019 at 23:13

matticustard

5,1691 gold badge17 silver badges19 bronze badges

5 Comments

Gjaa Over a year ago

I want my JS to run before or during the loading of the Vue component, but no after. IMPORTANT NOTE: The JS I want to run is not in the Vue component, it's out of it, in the page that hosts the component

matticustard Over a year ago

Then your post is very confusing. You said, "...Vue component has to fully load before that javascript runs". Now you're saying it can run before? That makes no sense.

Gjaa Over a year ago

You're right, that was a poor wording on my part. I just fixed that

matticustard Over a year ago

Then you should probably consider using the method @PtrTon mentioned. But the example JavaScript you provided requires the DOM to be loaded to work correctly, meaning you'll still have to delay the execution until after the Vue component is loaded if you want any links in the Vue component to be included in whatever you are doing — you can't get elements that haven't been written to the DOM yet.

Gjaa Over a year ago

You're right. The Vue component is part of the DOM and any Javascript after it must wait for the Vue component to render before it can run. So, @PtrTon is basically on the point. Thanks for the comments

Gautam Patadiya · Accepted Answer · 2019-08-09 03:35:24Z

0

Well, It will not wait because vue js compile and then generate DOM. A better way to perform any action after vue js load is to use the mounted or created methods of Vue Component class.

export default{
    name: 'TestComponent',
    mounted(){
        //
    },
    created(){
        //
    }
}

answered Aug 9, 2019 at 3:35

Gautam Patadiya

1,41214 silver badges19 bronze badges

1 Comment

matticustard Over a year ago

The created method won't have rendered the HTML yet.

Collectives™ on Stack Overflow

Load Vue components async on Laravel

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related