Registry / web-framework / vite-plugin-vue-meta-layouts

vite-plugin-vue-meta-layouts

library0.6.1jsnpmunverified

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.

web-framework

npm install vite-plugin-vue-meta-layouts

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-VUE-ME

vite-plugin-vue-meta-layouts

web-frameworkjavascriptv0.6.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

MetaLayouts

✓ import MetaLayouts from 'vite-plugin-vue-meta-layouts'

✗ const MetaLayouts = require('vite-plugin-vue-meta-layouts')

Default export of the plugin factory. ESM-only as Vite plugin.

setupLayouts

✓ import { setupLayouts } from 'virtual:meta-layouts'

✗ import { setupLayouts } from 'vite-plugin-vue-meta-layouts'

Virtual module provided by the plugin at build time, not from the package itself. Import from 'virtual:meta-layouts'.

ClientOptions

✓ import type { ClientOptions } from 'vite-plugin-vue-meta-layouts/client'

✗ import { ClientOptions } from 'vite-plugin-vue-meta-layouts'

Type augmentation is in the client subpath export. Not a runtime import.

setupLayouts (type)

✓ import { setupLayouts } from 'virtual:meta-layouts'

✗ import { setupLayouts } from 'vite-plugin-vue-meta-layouts'

setupLayouts is only available from the virtual module, not the package's JavaScript exports.

Shows installation, plugin registration, creating a default layout, and using setupLayouts with file-based route objects including meta layout override.

// vite.config.ts import { defineConfig } from 'vite' import Vue from '@vitejs/plugin-vue' import MetaLayouts from 'vite-plugin-vue-meta-layouts' export default defineConfig({ plugins: [Vue(), MetaLayouts()], }) // src/layouts/default.vue <template> <div> <h1>Default Layout</h1> <router-view /> </div> </template> // src/main.ts (or router setup) import { createRouter, createWebHistory } from 'vue-router' import { setupLayouts } from 'virtual:meta-layouts' const routes = setupLayouts([ { path: '/', component: () => import('./pages/Home.vue'), }, { path: '/about', component: () => import('./pages/About.vue'), meta: { layout: 'other' }, }, ]) export default createRouter({ routes, history: createWebHistory(), })

Debug

Known issues

gotchasetupLayouts must be imported from 'virtual:meta-layouts', not from the package itself.

fix

Use `import { setupLayouts } from 'virtual:meta-layouts'` in your route configuration file.

affects: >=0.0.0

breakingIn 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.

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.

affects: >=0.6.0

deprecatedThe 'skipTopLevelRouteLayout' option exists but is labeled as fixing a specific issue; it's not deprecated but may cause confusion if misused.

fix

Only set skipTopLevelRouteLayout: true if you encounter the nested route issue referenced in https://github.com/JohnCampionJr/vite-plugin-vue-layouts/issues/134.

affects: >=0.4.0

gotchaThe 'excludes' option accepts glob patterns, not exact paths. For example, use 'excludes: ['**\\/secret/*']'.

fix

Use glob patterns like 'excludes: ['**/secret/*']' to exclude routes from layout wrapping.

affects: >=0.5.0

Errors

Common errors & fixes

Cannot find module 'virtual:meta-layouts' or its corresponding type declarations.

TypeScript declarations for the virtual module are not included without the client types augmentation.

fix

Add `"types": ["vite-plugin-vue-meta-layouts/client"]` to your tsconfig.json compilerOptions.

[vite] Internal server error: The layout 'default' is not defined in the layouts directory.

Missing or misnamed layout file in src/layouts/ (default.vue).

fix

Ensure src/layouts/default.vue exists and exports a valid Vue component. Or change defaultLayout option to an existing layout.

TypeError: setupLayouts is not a function

Importing setupLayouts from the wrong source (likely 'vite-plugin-vue-meta-layouts' instead of 'virtual:meta-layouts').

fix

Change import to `import { setupLayouts } from 'virtual:meta-layouts'`.

Upgrade

Version history

0.6.1latest on npm

Audit

Dependencies

viterequiredRuntime peer dependency for the plugin system

vue-routerrequiredRuntime peer dependency to wrap routes with layouts

Agent activity

14 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/dishait/vite-plugin-vue-meta-layouts ↗

packagehttps://www.npmjs.com/package/vite-plugin-vue-meta-layouts ↗