CODEWITHSUNDEEP
javascriptlaravelvue.js
Gjaa
Gjaa

Reputation: 1579

Load Vue components async on Laravel

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

Upvotes: 1

Views: 1427

Answers (3)

PtrTon
PtrTon

Reputation: 3855

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.

Upvotes: 1

Gautam Patadiya
Gautam Patadiya

Reputation: 1412

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(){
        //
    }
}

Upvotes: 0

matticustard
matticustard

Reputation: 5149

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;
    }
}

Upvotes: 0

Related Questions