title: Async components Vue 2
body: <p>I'm trying to use async components. Here is my configuration:</p>
  <ol>
  <li>Vue 2 using Single File Component approach</li>
  <li>Webpack 2</li>
  <li>Vue Router</li>
  </ol>
  <p>The app is pretty basic, I have an &quot;everyone&quot; section contained in <code>App</code> and an &quot;admin&quot; section contained in <code>Admin</code>. I would like to load the component and all the <code>.js</code> related to the <code>Admin</code> if and only if I'm visiting the corresponding route.</p>
  <p>After reading the <a href="https://router.vuejs.org/en/advanced/lazy-loading.html" rel="nofollow noreferrer">vue-router docs on Lazy Loading</a>, and the one of Vue2 <a href="https://v2.vuejs.org/v2/guide/components.html#Async-Components" rel="nofollow noreferrer">on async components</a>, I'm still not sure how to do that especially with the <em><strong>Single File Component</strong></em> approach.</p>
  <p>Here is what I did for the moment but I don't know if it is ok since in the documentation of Vue2 they said :</p>
  <pre><code>Vue.component(
    'async-webpack-example',
    () =&gt; import('./my-async-component')
  )
  </code></pre>
  <p>Also what do I have to do with webpack so it creates a chunk of everything related to <code>Admin</code> so that <code>adminChunk.js</code>is just loaded when reaching admin route ?</p>
  <p>What is the syntax to make a single file component a async component ?</p>
  <h3>app.js</h3>
  <pre><code>const Admin = resolve =&gt; {
      // require.ensure is Webpack's special syntax for a code-split point.
      require.ensure(['./components/admin/Admin.vue'], () =&gt; {
          resolve(require('./components/admin/Admin.vue'))
      })
  };
  
  const routes = [
      { path: '/', component: App },
      { path: '/admin', meta: { requiresAdmin: true }, component: Admin},
  ];
  </code></pre>
  <h3>Admin.vue</h3>
  <pre><code>&lt;template&gt;
          &lt;admin-menu&gt;&lt;/admin-menu&gt;
          &lt;child&gt;&lt;/child&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
      import AdminMenu from './Admin-Menu.vue'
      import Child from './child.vue
      
      export default{
          data () {
          },
          components: {
              AdminMenu,
              Child,
          },
      }
  &lt;/script&gt;
  </code></pre>