JohnCampionJr / vite-plugin-vue-layouts

Vue layout plugin for Vite
MIT License
459 stars 64 forks source link

Unable to use layouts on child routes #103

Closed skulls-dot-codes closed 1 year ago

skulls-dot-codes commented 1 year ago

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 ```
/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' } } ```
skulls-dot-codes commented 1 year ago

This is actually an issue with vite-plugin-pages using nested routes. Closing.