title: Load Vue components async on Laravel
body: <p>I have some <code>javascript</code> to run in a <code>blade</code> file but it is waiting for a <code>Vue</code> component to fully load before running.</p>
  
  <pre><code>...
  &lt;p id="a"&gt;&lt;/p&gt;
  &lt;my-vue-component&gt;&lt;/my-vue-component&gt;
  ...
  &lt;script&gt;
    document.getElementById('a').innerText = 'ggg'
  &lt;/script&gt;
  </code></pre>
  
  <p>The javascript code waits for the <code>Vue</code> component to load and then it executes.</p>
  
  <p>I don't want the <code>Vue</code> 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.</p>
  
  <p>I tried installing the dynamic import plugin for async rendering</p>
  
  <pre><code>npm install --save-dev @babel/plugin-syntax-dynamic-import
  </code></pre>
  
  <p>and registering it in .babelrc</p>
  
  <pre><code>{
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
  }
  </code></pre>
  
  <p>and running the compiler</p>
  
  <pre><code>npm run watch
  </code></pre>
  
  <p>And then in the <code>app.js</code> where the components are registered</p>
  
  <pre><code>Vue.component('my-vue-component', () =&gt; import('./components/MyVueComponent.vue').default);
  </code></pre>
  
  <p>That didn't do what I was expecting</p>