vite-plugin-vue-layouts-next

vite-plugin-vue-layouts-next

Router based layout plugin for Vite 8, Vue 3 and Vue Router 5.

A fork of vite-plugin-vue-layouts with some improvements and fixes, supports Vite 8, Vue 3 and Vue Router 5.

Layouts are stored in the /src/layouts folder by default and are standard Vue components with a <router-view></router-view> in the template.

Pages without a layout specified use default.vue for their layout.

You can use route blocks to allow each page to determine its layout. The block below in a page will look for /src/layouts/users.vue for its layout.

<route lang="yaml">
meta:
  layout: users
</route>

📖 Read the documentation

Table of Contents

• Install
• Usage
• Documentation
• Maintainer
• Thanks
• Contributing
• License

Install

# npm
npm install -D vite-plugin-vue-layouts-next

# yarn
yarn add -D vite-plugin-vue-layouts-next

# pnpm
pnpm add -D vite-plugin-vue-layouts-next

Usage

Add to your vite.config.ts:

import Vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import Layouts from 'vite-plugin-vue-layouts-next'
import VueRouter from 'vue-router/vite'

export default defineConfig({
  plugins: [VueRouter(), Vue(), Layouts()],
})

In main.ts, import Vue Router 5's generated file-based routes and setup the layouts.

import { setupLayouts } from 'virtual:generated-layouts'
import { createRouter } from 'vue-router'
import { routes } from 'vue-router/auto-routes'

const router = createRouter({
  // ...
  routes: setupLayouts(routes),
})

See Getting Started for client types and per-page layouts.

Documentation

Full documentation lives at vue-layouts.loicduong.dev:

• Getting Started - install, usage and client types
• Why - the rationale, and how this fork differs
• How it works - what setupLayouts does to your routes
• Migration - upgrading to v3, including layout name normalization
• Config - plugin options, layout names and ClientSideLayout options
• Common Patterns - transitions and passing data between layouts and pages
• Dynamic Layouts - setPageLayout and useLayout
• Typed Layouts - generated .d.ts that type-checks layout names
• ClientSideLayout - the lighter, glob-import based variant
• Examples - runnable SPA, SSG, client-side and nested-routes setups

The site also publishes llms.txt and llms-full.txt for LLM consumption.

The docs site is built with VitePress and lives in docs/. To work on it locally:

pnpm install
pnpm docs:dev

Maintainer

Loic Duong

Thanks

vite-plugin-vue-layouts

Contributing

PRs accepted. Open an issue or submit PRs for any improvements.

License

MIT © loicduong