I am unable to get layouts to work on child routes. Layouts work in top level pages like /src/pages/foo.vue Not sure if this is a misconfiguration, an issue with this package, vite-plugin-pages, or another package.
vite.config.js
```javascript
import { fileURLToPath, URL } from 'node:url'
import { resolve } from 'node:path'
import { readFileSync } from 'node:fs'
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Pages from 'vite-plugin-pages'
import Markdown from 'vite-plugin-md'
import { code, meta, link } from 'md-powerpack'
import Components from 'unplugin-vue-components/vite'
import Layouts from 'vite-plugin-vue-layouts'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import matter from 'gray-matter'
// https://vitejs.dev/config/
export default defineConfig({
server: {
host: true
},
plugins: [
Vue({
include: [/\.vue$/, /\.md$/]
}),
Pages(),
Layouts({
defaultLayout: 'default'
}),
Components({
extensions: ['vue', 'md'],
include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
resolvers: [
IconsResolver({
prefix: 'icon'
})
]
}),
Markdown({
builders: [code(), meta(), link()]
}),
Icons({
scale: 2,
defaultClass: 'inline'
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
```
/src/router/index.js
```javascript
import { createRouter, createWebHistory } from 'vue-router'
import { setupLayouts } from 'virtual:generated-layouts'
import generatedRoutes from 'virtual:generated-pages'
const routes = setupLayouts(generatedRoutes)
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes
})
export default router
```
/src/layouts/post.vue
```javascript
{{ post.title }}
{{ post.summary }}
```
/src/pages/blog.vue
```javascript
{
name: "blog"
}
```
/src/pages/blog/test.md
```markdown
---
title: 'Test Blog Post'
summary: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida metus, non mollis ipsum dictum ac. Mauris facilisis eu sem eget facilisis. Quisque non ornare dui, sit amet auctor.'
tags: ['javascript', 'vue', 'news']
image: '/images/code.png'
attribute: 'me'
date: '2021-08-19T16:00:00.000+00:00'
layout: 'post'
---
{{ title }}
```
/src/pages/blog/another.vue
```javascript
{
meta: {
layout: 'post'
}
}
I am unable to get layouts to work on child routes. Layouts work in top level pages like
/src/pages/foo.vue
Not sure if this is a misconfiguration, an issue with this package,vite-plugin-pages
, or another package.
```javascript import { fileURLToPath, URL } from 'node:url' import { resolve } from 'node:path' import { readFileSync } from 'node:fs' import { defineConfig } from 'vite' import Vue from '@vitejs/plugin-vue' import Pages from 'vite-plugin-pages' import Markdown from 'vite-plugin-md' import { code, meta, link } from 'md-powerpack' import Components from 'unplugin-vue-components/vite' import Layouts from 'vite-plugin-vue-layouts' import Icons from 'unplugin-icons/vite' import IconsResolver from 'unplugin-icons/resolver' import matter from 'gray-matter' // https://vitejs.dev/config/ export default defineConfig({ server: { host: true }, plugins: [ Vue({ include: [/\.vue$/, /\.md$/] }), Pages(), Layouts({ defaultLayout: 'default' }), Components({ extensions: ['vue', 'md'], include: [/\.vue$/, /\.vue\?vue/, /\.md$/], resolvers: [ IconsResolver({ prefix: 'icon' }) ] }), Markdown({ builders: [code(), meta(), link()] }), Icons({ scale: 2, defaultClass: 'inline' }) ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } } }) ```vite.config.js
```javascript import { createRouter, createWebHistory } from 'vue-router' import { setupLayouts } from 'virtual:generated-layouts' import generatedRoutes from 'virtual:generated-pages' const routes = setupLayouts(generatedRoutes) const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes }) export default router ```/src/router/index.js
```javascript/src/layouts/post.vue
{{ post.title }}
{{ post.summary }}
```javascript/src/pages/blog.vue
```markdown --- title: 'Test Blog Post' summary: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida metus, non mollis ipsum dictum ac. Mauris facilisis eu sem eget facilisis. Quisque non ornare dui, sit amet auctor.' tags: ['javascript', 'vue', 'news'] image: '/images/code.png' attribute: 'me' date: '2021-08-19T16:00:00.000+00:00' layout: 'post' --- {{ title }} ```/src/pages/blog/test.md
```javascript/src/pages/blog/another.vue
Test Blog Post