Vue.js 3 - Trying to build a system with 2 layouts

Question

I am a beginner with vue.js (3)

I try to build a system with 2 layouts :

• 1 for a connected user
• 1 for a not connected user

In my router/index.js, I add a meta for each route :

 const routes = [
  {
    path: '/',
    name: 'Home',
    meta: { layout: 'layout-connected' },
    component: Home
  },
  {
    path: '/myspace',
    name: 'MySpace',
    meta: { auth: true },
    component: MySpace
  }
]

In my App.vue, I decide of which layout to use like that (see the ":is="layout"):

<template>
  <div id="app">
    <component :is="layout">
      <router-view/>
    </component>
  </div>
</template>

<script>
const defaultLayout = 'layout-not-connected'

export default {
  computed: {
    layout () {
      console.log(this.$route.meta.layout)
      return (this.$route.meta.layout || defaultLayout)
    }
  },

And at least , in my layout I have :

<template>
  <div class="container-fluid">
    <div class="row essai">
      <h1>layout non connected</h1>
      <slot />
    </div>
  </div>
</template>

When I console.log which route to apply, it works fine : I have the correct layout in the console.

BUT I never see the layout (for example the tag). Only the component.

Do I have understood fine the concept ? What can be my errors ?

Thanks

Answer 1

The layouts are components which should be registered globally in main.js using :

app.component('layout-name',theLayoutComponent)

or locally in components option :

<template>
  <div id="app">
    <component :is="layout">
      <router-view/>
    </component>
  </div>
</template>

<script>
const defaultLayout = 'layout-not-connected'
import LayoutConnected from 'path/to/LayoutConnectedComponent'
import DefaultLayout from 'path/to/DefaultLayout Component'
export default {
 components:{
DefaultLayout,LayoutConnected
 },
  computed: {
    layout () {
      console.log(this.$route.meta.layout)
      return (this.$route.meta.layout || defaultLayout)
    }
  },