Registry / web-framework / vue-router-layout

vue-router-layout

library0.4.1jsnpmunverified

Vue Router Layout is a lightweight utility designed for dynamically resolving layout components within Vue Router applications. Currently stable at version 0.4.1, the library provides a programmatic way to define layouts for routes by using a factory function, `createRouterLayout`, which then generates a `<RouterLayout>` component. This component is subsequently integrated into Vue Router's `routes` configuration. The package supports dynamic imports for layout components, enabling efficient code splitting. A key differentiator is its focus on minimalist layout resolution, allowing developers to specify layouts directly within their page components via a `layout` option, including passing props since v0.4.0. Its release cadence is irregular but consistent with bug fixes and features. Crucially, version 0.2.0 marked a breaking change by dropping Vue 2 support in favor of Vue 3, necessitating version awareness for project compatibility. For more comprehensive routing solutions, the author points to `vue-cli-plugin-auto-routing`.

web-framework

npm install vue-router-layout

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-ROUTER-LAYOUT

vue-router-layout

web-frameworkjavascriptv0.4.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

createRouterLayout

✓ import { createRouterLayout } from 'vue-router-layout'

✗ const createRouterLayout = require('vue-router-layout')

The primary named export, a factory function that returns the RouterLayout component.

LayoutResolver

✓ import type { LayoutResolver } from 'vue-router-layout'

Type import for the callback function that resolves layout components passed to `createRouterLayout`.

RouterLayoutOptions

✓ import type { RouterLayoutOptions } from 'vue-router-layout'

Type import for the options object that can be passed to `createRouterLayout`.

Initializes a `RouterLayout` component, configuring Vue Router to use it for dynamic layout resolution based on route meta or component options, demonstrating basic layout switching and prop passing.

import { createApp } from 'vue'; import { createRouter, createWebHistory } from 'vue-router'; import { createRouterLayout } from 'vue-router-layout'; // Define your layout components const DefaultLayout = { template: '<div><h1>Default Layout</h1><router-view /></div>' }; const AdminLayout = { template: '<div><h2>Admin Panel Layout</h2><router-view /></div>' }; // Create <RouterLayout> component. const RouterLayout = createRouterLayout(layout => { if (layout === 'admin') { return Promise.resolve(AdminLayout); } return Promise.resolve(DefaultLayout); }); const routes = [ { path: '/', component: RouterLayout, children: [ { path: '', component: { template: '<p>Home Page</p>', layout: 'default' }, }, { path: 'dashboard', component: { template: '<p>Admin Dashboard</p>', layout: { name: 'admin', props: { title: 'Admin' } } }, }, { path: 'profile', component: { template: '<p>User Profile</p>', layout: 'default' }, }, ], }, ]; const router = createRouter({ history: createWebHistory(), routes, }); const app = createApp({}); app.use(router); app.mount('#app'); // For a real application, you would render this in an HTML file: // <div id="app"></div> // <router-view></router-view>

Debug

Known issues

breakingVersion 0.2.0 and later drops support for Vue 2, requiring Vue 3 or higher. Projects on Vue 2 must use `vue-router-layout@0.1.x`.

fix

Upgrade your project's Vue version to v3+, or downgrade `vue-router-layout` to a `0.1.x` release for Vue 2 compatibility.

affects: >=0.2.0

gotchaThe `created` hook in page components could be wrongly called when the layout changes, leading to unintended side effects or re-initialization.

fix

Upgrade to `vue-router-layout@0.4.1` or newer to resolve the issue where the `created` hook is incorrectly triggered on layout changes.

affects: >=0.2.0 <0.4.1

gotchaPrior to v0.4.0, directly passing props to layout components via the `layout` option in route meta or component options was not supported, limiting layout reusability.

fix

Upgrade to `vue-router-layout@0.4.0` or newer to utilize the `layout.props` option for passing data to your layout components.

affects: <0.4.0

gotchaInitial versions (`<0.3.0`) had issues with lifecycle hooks or layout updates when using async components for pages or layouts, potentially leading to incorrect rendering or hook calls and requiring manual workarounds.

fix

Ensure you are on `vue-router-layout@0.3.0` or later to benefit from improved handling of lazy component loading in router hooks and corrected lifecycle behavior, especially with async components.

affects: <0.3.0

Errors

Common errors & fixes

TypeError: app.use is not a function

Attempting to use `vue-router-layout` v0.2.0+ (designed for Vue 3) in a Vue 2 project, where `app.use` syntax is not available.

fix

Downgrade `vue-router-layout` to `0.1.x` for Vue 2 projects, or upgrade your entire project to Vue 3.

Property 'layout' does not exist on type 'ComponentOptionsBase<any, any, any, any, any, any, any, any, any>'.

TypeScript compiler error when using the custom `layout` option within a Vue component's options API, as the type definitions do not automatically include this custom property.

fix

Augment Vue's `ComponentCustomOptions` interface to declare the `layout` property. For example: `declare module '@vue/runtime-core' { interface ComponentCustomOptions { layout?: string | { name: string; props?: Record<string, any> }; } }`

Layout component does not update or render correctly after route navigation, especially with lazy-loaded components.

Older versions of `vue-router-layout` had known bugs related to the reactivity and lifecycle of dynamically loaded components within the layout system.

fix

Upgrade `vue-router-layout` to version `0.3.0` or higher, which includes significant improvements for handling lazy component loading and ensuring proper layout updates.

Upgrade

Version history

0.4.1latest on npm

Audit

Dependencies

vuerequiredRuntime dependency for a Vue application. Vue 3+ required since v0.2.0.

vue-routerrequiredCore dependency for integrating with Vue's routing system.

Agent activity

10 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/ktsn/vue-router-layout ↗

packagehttps://www.npmjs.com/package/vue-router-layout ↗