ClientSideLayout

ClientSideLayout is an alternative to the default Layouts() plugin. It uses a simpler virtual file + glob import scheme, which means its HMR is faster and more accurate, but also more limited.

When to Use It

	Layouts()	ClientSideLayout()
Layout resolution	Build time, explicit generated imports	Run time, import.meta.glob
HMR	Regenerates the virtual module	Faster and more accurate
layoutsDirs	One or many directories, globs supported	A single directory
importMode	Per-layout function	One mode for all layouts
exclude / extensions	Supported	Not supported

Reach for ClientSideLayout when you have a single flat layouts directory and want the tightest dev feedback loop. Stay on Layouts() when you need multiple layout directories, glob paths, or per-layout import modes.

Usage

vite.config.js

import { defineConfig } from 'vite'
import { ClientSideLayout } from 'vite-plugin-vue-layouts-next'

export default defineConfig({
  plugins: [
    ClientSideLayout({
      layoutsDirs: 'src/mylayouts', // default to 'src/layouts'
      defaultLayout: 'my-default', // default to 'default', matches myDefault.vue
      importMode: 'sync' // The default will automatically detect -> ssg is sync, other is async
    }),
  ],
})

setupLayouts is imported from virtual:generated-layouts exactly as with the default plugin, and layout names follow the same normalization rules.

See ClientSideLayout Options for the full reference.