# vite-plugin-vue-layouts-next

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

- 🧩 Layouts as standard Vue components in `src/layouts`
- 🗂️ Per-page layout selection through `meta.layout`
- 🔤 Nuxt-compatible layout name normalization
- 🧵 Compiles down to plain vue-router nested routes
- ⚡️ A lighter `ClientSideLayout` variant built on `import.meta.glob`

`vite-plugin-vue-layouts-next` gives Vue Router 5 file-based routes a layout system. It consists of two parts:

- A Vite plugin that scans your layouts directory and generates the `virtual:generated-layouts` module.
- A `setupLayouts` helper that rewrites your route records so each page becomes a child of its layout.

Pages that do not choose a layout use `default.vue`. Pages that do choose one name it through `meta.layout`, using a normalized layout name.

## Table of Contents

### Introduction

- [Getting Started](/guide.md)
- [Why](/guide/why.md)
- [How it works](/guide/how-it-works.md)

### Guide

- [Common Patterns](/guide/patterns.md)
- [Dynamic Layouts](/guide/dynamic-layout.md)
- [ClientSideLayout](/guide/client-side-layout.md)
- [Migration](/guide/migration.md)
- [Examples](/guide/examples.md)

### Reference

- [Configuring the Plugin](/config.md)

### Config

- [Configuring the Plugin](/config.md)
- [Plugin Options](/config/plugin-options.md)
- [Layout Names](/config/layout-names.md)
- [ClientSideLayout Options](/config/client-side-options.md)