Plugin Options

Options accepted by the default Layouts() export.

interface UserOptions {
  layoutsDirs?: string | string[]
  extensions?: string[]
  exclude?: string[]
  defaultLayout?: string
  importMode?: (name: string) => 'sync' | 'async'
  inheritDefaultLayout?: boolean
}

layoutsDirs

• Type: string | string[]
• Default: 'src/layouts'
• Related: exclude, Layout Names

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

Can also be an array of layout dirs:

vite.config.js

Layouts({
  layoutsDirs: ['src/layouts', 'src/admin-layouts'],
})

Can use ** to support scenarios like module1/layouts and modules2/layouts:

vite.config.js

Layouts({
  layoutsDirs: 'src/**/layouts',
})

Any files named __*__.vue are excluded. Additional exclusions go through exclude.

extensions

• Type: string[]
• Default: ['vue']

Valid file extensions for layout components.

vite.config.js

Layouts({
  extensions: ['vue'],
})

exclude

• Type: string[]
• Default: []
• Related: layoutsDirs

List of path globs to exclude when resolving layouts.

vite.config.js

Layouts({
  exclude: ['**/components/**'],
})

Files named __*__.vue are always excluded, regardless of this option.

defaultLayout

• Type: string
• Default: 'default'
• Related: Layout Names

Normalized layout name to use when a route does not specify meta.layout.

The value is a layout name, not a filename. For example myDefault.vue is named my-default:

vite.config.js

Layouts({
  defaultLayout: 'my-default',
})

importMode

• Type: (name: string) => 'sync' | 'async'
• Default: 'sync' for SSG, 'async' otherwise

Mode for importing layouts. The default is detected from the build: static site generation imports synchronously, everything else asynchronously.

vite.config.js

Layouts({
  importMode: name => (name === 'default' ? 'sync' : 'async'),
})

inheritDefaultLayout

• Type: boolean
• Default: true
• Related: How it works

Whether nested routes should inherit the default layout from parent routes.

When false, if a child route has its own layout, the parent route won't use the default layout. This prevents double-wrapping layouts when child routes specify their own layout.

This option applies to Vue Router 5 file-based routes, which generate nested route structures with children arrays. It can only be set globally in the plugin configuration.

vite.config.js

Layouts({
  inheritDefaultLayout: false,
})