title: Vue.js 3 - Trying to build a system with 2 layouts
body: <p>I am a beginner with vue.js (3)</p>
  <p>I try to build a system with 2 layouts :</p>
  <ul>
  <li>1 for a connected user</li>
  <li>1 for a not connected user</li>
  </ul>
  <p>In my router/index.js, I add a meta for each route :</p>
  <pre><code> const routes = [
    {
      path: '/',
      name: 'Home',
      meta: { layout: 'layout-connected' },
      component: Home
    },
    {
      path: '/myspace',
      name: 'MySpace',
      meta: { auth: true },
      component: MySpace
    }
  ]
  </code></pre>
  <p>In my App.vue, I decide of which layout to use like that <strong>(see the &quot;:is=&quot;layout&quot;)</strong>:</p>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;app&quot;&gt;
      &lt;component :is=&quot;layout&quot;&gt;
        &lt;router-view/&gt;
      &lt;/component&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  const defaultLayout = 'layout-not-connected'
  
  export default {
    computed: {
      layout () {
        console.log(this.$route.meta.layout)
        return (this.$route.meta.layout || defaultLayout)
      }
    },
  </code></pre>
  <p>And at least , in my layout I have :</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;container-fluid&quot;&gt;
      &lt;div class=&quot;row essai&quot;&gt;
        &lt;h1&gt;layout non connected&lt;/h1&gt;
        &lt;slot /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>When I console.log which route to apply, it works fine : I have the correct layout in the console.</p>
  <p>BUT I never see the layout (for example the  tag). Only the component.</p>
  <p>Do I have understood fine the concept ? What can be my errors ?</p>
  <p>Thanks</p>