vite-plugin-vue-layouts

Router based layout for Vue 3 applications using Vite

Overview

This works best along with the vite-plugin-pages.

Layouts are stored in the /src/layouts folder by default and are standard Vue components with a <route-view></route-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.

See the Vitesse starter template for a working example.

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

Getting Started

Install Layouts:

$ npm install -D vite-plugin-vue-layouts

Add to your vite.config.js:

import Vue from '@vitejs/plugin-vue';
import Pages from 'vite-plugin-pages';
import Layouts from 'vite-plugin-layouts';

export default {
  plugins: [Vue(), Pages(), Layouts()],
};

In main.ts, you need to add a few lines to import the generated code and setup the layouts.

import { createRouter } from 'vue-router'
import { setupLayouts } from 'layouts-generated'
import generatedRoutes from 'pages-generated'

const routes = setupLayouts(generatedRoutes)

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

Client Types

If you want type definition of layouts-generated, add vite-plugin-vue-layouts/client to compilerOptions.types of your tsconfig:

{
  "compilerOptions": {
    "types": ["vite-plugin-vue-layouts/client"]
  }
}

Configuration

interface UserOptions {
  layoutsDir?: string
  exclude: string[]
}

Using configuration

To use custom configuration, pass your options to Pages when instantiating the plugin:

// vite.config.js
import Layouts from 'vite-plugin-vue-layouts';

export default {
  plugins: [
    Layouts({
      layoutsDir: 'src/mylayouts',
    }),
  ],
};

layoutsDir

Relative path to the layouts directory. Supports globs. All .vue files in this folder are imported async into the generated code.

Any files named __*__.vue will be excluded, and you can specify any additional exclusions with the exclude option

Default: 'src/layouts'

antfu / vite-plugin-vue-layouts