{"id":22919,"library":"vite-plugin-vue-meta-layouts","title":"vite-plugin-vue-meta-layouts","description":"Vite plugin providing a meta-based layout system for vue-router. Current version 0.6.1 (released 2023), with active development and frequent releases. Key differentiator from vite-plugin-vue-layouts: proper HMR support in modern Vite versions. Allows defining layouts via route meta (e.g., meta: { layout: 'other' }) or using a default layout. Supports both sync and async import modes, file-based routing plugins (vite-plugin-pages, unplugin-vue-router), customizable layout directory, excludes, and meta field name. Written in TypeScript with bundled types. Requires Vite >=2.0.0 and vue-router >=4.0.14.","status":"active","version":"0.6.1","language":"javascript","source_language":"en","source_url":"https://github.com/dishait/vite-plugin-vue-meta-layouts","tags":["javascript","vite","plugin","template","typescript"],"install":[{"cmd":"npm install vite-plugin-vue-meta-layouts","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-vue-meta-layouts","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-vue-meta-layouts","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime peer dependency for the plugin system","package":"vite","optional":false},{"reason":"Runtime peer dependency to wrap routes with layouts","package":"vue-router","optional":false}],"imports":[{"note":"Default export of the plugin factory. ESM-only as Vite plugin.","wrong":"const MetaLayouts = require('vite-plugin-vue-meta-layouts')","symbol":"MetaLayouts","correct":"import MetaLayouts from 'vite-plugin-vue-meta-layouts'"},{"note":"Virtual module provided by the plugin at build time, not from the package itself. Import from 'virtual:meta-layouts'.","wrong":"import { setupLayouts } from 'vite-plugin-vue-meta-layouts'","symbol":"setupLayouts","correct":"import { setupLayouts } from 'virtual:meta-layouts'"},{"note":"Type augmentation is in the client subpath export. Not a runtime import.","wrong":"import { ClientOptions } from 'vite-plugin-vue-meta-layouts'","symbol":"ClientOptions","correct":"import type { ClientOptions } from 'vite-plugin-vue-meta-layouts/client'"},{"note":"setupLayouts is only available from the virtual module, not the package's JavaScript exports.","wrong":"import { setupLayouts } from 'vite-plugin-vue-meta-layouts'","symbol":"setupLayouts (type)","correct":"import { setupLayouts } from 'virtual:meta-layouts'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite'\nimport Vue from '@vitejs/plugin-vue'\nimport MetaLayouts from 'vite-plugin-vue-meta-layouts'\n\nexport default defineConfig({\n  plugins: [Vue(), MetaLayouts()],\n})\n\n// src/layouts/default.vue\n<template>\n  <div>\n    <h1>Default Layout</h1>\n    <router-view />\n  </div>\n</template>\n\n// src/main.ts (or router setup)\nimport { createRouter, createWebHistory } from 'vue-router'\nimport { setupLayouts } from 'virtual:meta-layouts'\n\nconst routes = setupLayouts([\n  {\n    path: '/',\n    component: () => import('./pages/Home.vue'),\n  },\n  {\n    path: '/about',\n    component: () => import('./pages/About.vue'),\n    meta: { layout: 'other' },\n  },\n])\n\nexport default createRouter({\n  routes,\n  history: createWebHistory(),\n})","lang":"typescript","description":"Shows installation, plugin registration, creating a default layout, and using setupLayouts with file-based route objects including meta layout override."},"warnings":[{"fix":"Use `import { setupLayouts } from 'virtual:meta-layouts'` in your route configuration file.","message":"setupLayouts must be imported from 'virtual:meta-layouts', not from the package itself.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"If you were relying on the meta field name before v0.6.0, it remains 'layout' by default. Only breaking if you used a different metaName explicitly.","message":"In v0.6.0, the 'metaName' option was added, changing the default meta field from 'layout' to potentially custom names. If you rely on the default, ensure you don't pass a different metaName inadvertently.","severity":"breaking","affected_versions":">=0.6.0"},{"fix":"Only set skipTopLevelRouteLayout: true if you encounter the nested route issue referenced in https://github.com/JohnCampionJr/vite-plugin-vue-layouts/issues/134.","message":"The 'skipTopLevelRouteLayout' option exists but is labeled as fixing a specific issue; it's not deprecated but may cause confusion if misused.","severity":"deprecated","affected_versions":">=0.4.0"},{"fix":"Use glob patterns like 'excludes: ['**/secret/*']' to exclude routes from layout wrapping.","message":"The 'excludes' option accepts glob patterns, not exact paths. For example, use 'excludes: ['**\\\\/secret/*']'.","severity":"gotcha","affected_versions":">=0.5.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Add `\"types\": [\"vite-plugin-vue-meta-layouts/client\"]` to your tsconfig.json compilerOptions.","cause":"TypeScript declarations for the virtual module are not included without the client types augmentation.","error":"Cannot find module 'virtual:meta-layouts' or its corresponding type declarations."},{"fix":"Ensure src/layouts/default.vue exists and exports a valid Vue component. Or change defaultLayout option to an existing layout.","cause":"Missing or misnamed layout file in src/layouts/ (default.vue).","error":"[vite] Internal server error: The layout 'default' is not defined in the layouts directory."},{"fix":"Change import to `import { setupLayouts } from 'virtual:meta-layouts'`.","cause":"Importing setupLayouts from the wrong source (likely 'vite-plugin-vue-meta-layouts' instead of 'virtual:meta-layouts').","error":"TypeError: setupLayouts is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}