title: Use containers for templates in vuejs using typescript
body: <p>TL;DR</p>
  
  <p>For my Vuejs projects I always separate the dashboard and content. I create a directory called containers to render my dashboard from there, with the possibility of having multiple dashboards. Using normal javascript the router works perfectly.</p>
  
  <p>link working in codesandbox: <a href="https://codesandbox.io/s/vuejs-containers-dashboard-js-bpnmx?file=/src/main.js" rel="nofollow noreferrer">Js - Sandbox</a></p>
  
  <p>The problem is when I migrate to typescript, the router fails to open links, shows errors, duplicates template, it doesn't work to go back or sometimes it doesn't push to the other view.</p>
  
  <p>I have posted a <a href="https://github.com/braian125/vuejs-containers-dashboard" rel="nofollow noreferrer">repository on github</a> with two branches: master (working with javascript) and typescript-way (router not working). If I manually enter in the address bar or when reloading (f5) each route works fine, but when clicking on the links it shows errors</p>
  
  <p>Next I want to show how it works well using javascript:</p>
  
  <pre><code>src/
    - components/
    - containers/
      - dashboard/
        - layout/
          - Header.vue
          - Sidebar.vue
            ...
        - Dashboard.vue
    - router/
    - store/
    - views/
    - App.vue
    - main.js
  </code></pre>
  
  <p>//router.js</p>
  
  <pre><code>routes: [
      {
        path: '/',
        name: '',
        redirect: 'home',
        component: () =&gt; import('@/containers/dashboard/Dashboard'),
        children: [
          {
            path: '/home',
            name: 'home',
            component: () =&gt; import(/* webpackChunkName: "home" */ './views/Home')
          },
          {
            path: '/about',
            name: 'about',
            component: () =&gt; import(/* webpackChunkName: "about" */ './views/About')
          },
        ]
      },
      {
        path: '/login',
        name: 'login',
        component: () =&gt; import(/* webpackChunkName: "about" */ './views/Login')
      }
   ]
  </code></pre>
  
  <p>//App.vue</p>
  
  <pre><code>&lt;template&gt;
   &lt;div id="app"&gt;
      &lt;router-view /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>//containers/dashboard/Dashboard.vue</p>
  
  <pre><code>&lt;template&gt;
      &lt;div id="page-wrapper"&gt;
          &lt;div id="page-container"&gt;
              &lt;sidebar/&gt;
              &lt;div id="main-container"&gt;
                  &lt;header-app @sidebarToggle="sidebarToggle" @logout="logout" /&gt;
                  &lt;div id="page-content"&gt;
                      &lt;router-view/&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  .....
  &lt;/script&gt;
  </code></pre>
  
  <p>for typescript I use the same concept with the code adapted for vue and typescript</p>