Vue 3 Multiple Layouts.md

Project structure

• app.js
• routes/route.js
• layouts/Default.vue
• components
  • Home.vue
  • About.vue

App.js

import { createApp } from  'vue'

// Router
import { router } from  './routes/router.js'

// Initial component
import  App  from  './components/App.vue'

const  app = createApp(App)

app.use(router)

app.mount('#app')

router.js

import {createRouter, createWebHashHistory} from  'vue-router'

// Components
import  Home  from  '../components/Home.vue'
import  About  from  '../components/About.vue'

const  routes = [
	{
		name:  'Home',
		path:  '/',
		component:  Home,
		meta: {
			// You can define your layout here otherwise it will use default layout (App.vue)
			layout:  'DefaultLayout'
		}
	},
	{
		name:  'About',
		path:  '/about',
		component:  About
	}
] 

export  const  router = createRouter({
	history:  createWebHashHistory(),
	routes
})

App.vue

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

<script>
// Default layout
import  DefaultLayout  from  '../layouts/Default.vue'

export  default {
	components: {
		DefaultLayout
	},
	data() {
		return {
			layout:  null
		}
	},
	watch: {
		$route(to) {
			this.layout = (to.meta.layout !== undefined) ? to.meta.layout : 'DefaultLayout'
		}
	}
}
</script>

DefaultLayout.vue

<router-link to="/home">Home</router-link>
<router-link  to="/about">About</router-link>
<hr/>
<div>
	<slot/>
</div>

Home.vue

About vue is same with this one

<template>
	<p>this is home</p>
</template>

<script>
	export  default {

	}
</script>