title: VueJS dynamic routes and components
body: <p>Using cue-cli 3. Is it possible to do this (router.js):</p>
  
  <pre><code>axios.get( `${process.env.VUE_APP_API_DOMAIN}/wp-json/api/v1/routes`).then( r =&gt; r.data ).then(routes =&gt; {
      routes.pages.forEach( (e) =&gt; {
          router.addRoutes([
              {
                  path: `/${e.slug}`,
                  component: e.template,
              },
          ]);
      });
  });
  </code></pre>
  
  <p>e.template is a string 'Default' and of course VueJS says:
  <code>route config "component" for path: /privacy-policy cannot be a string id. Use an actual component instead.</code> Tried with <code>Vue.component(e.template)</code> no luck.</p>
  
  <p>What I want to do here is create dynamic routes based on XHR response. </p>
  
  <p>Here is all router.js code:</p>
  
  <pre><code>import Vue from 'vue'
  import Router from 'vue-router'
  import Home from './views/Home.vue'
  import Default from './views/Default.vue'
  import Test from './views/Test.vue'
  import axios from "axios";
  
  Vue.use(Router);
  
  const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
      {
        path: '/',
        name: 'home',
        component: Home
      },
    ]
  });
  
  axios.get( `${process.env.VUE_APP_API_DOMAIN}/wp-json/api/v1/routes`).then( r =&gt; r.data ).then(routes =&gt; {
      routes.pages.forEach( (e) =&gt; {
          router.addRoutes([
              {
                  path: `/${e.slug}`,
                  component: e.template,
              },
          ]);
      });
  });
  
  export default router;
  </code></pre>