vue-layouts-next

vite-plugin-vue-layouts-nextRouter based layouts for Vue

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

Get Started
Config Reference
View on GitHub

  • Zero-config layouts

    Drop standard Vue components into src/layouts and every page picks up default.vue automatically.

  • Per-page layouts

    Pick a layout per page from a route block or definePage, with Nuxt-compatible layout names.

  • Just nested routes

    Layouts compile down to plain vue-router nested routes, so the full vue-router API stays available.

What is it? ​

vite-plugin-vue-layouts-next is a fork of vite-plugin-vue-layouts with improvements and fixes, supporting 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.

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

Head to Getting Started to install it, or Why for the rationale behind the fork.

Released under the MIT License.

Copyright © 2024-present Loic Duong