{"id":12562,"library":"vue-router-layout","title":"Vue Router Layout Selector","description":"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`.","status":"active","version":"0.4.1","language":"javascript","source_language":"en","source_url":"https://github.com/ktsn/vue-router-layout","tags":["javascript","Vue","Vue Router","routing","layout","dynamic imports","typescript"],"install":[{"cmd":"npm install vue-router-layout","lang":"bash","label":"npm"},{"cmd":"yarn add vue-router-layout","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-router-layout","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for a Vue application. Vue 3+ required since v0.2.0.","package":"vue","optional":false},{"reason":"Core dependency for integrating with Vue's routing system.","package":"vue-router","optional":false}],"imports":[{"note":"The primary named export, a factory function that returns the RouterLayout component.","wrong":"const createRouterLayout = require('vue-router-layout')","symbol":"createRouterLayout","correct":"import { createRouterLayout } from 'vue-router-layout'"},{"note":"Type import for the callback function that resolves layout components passed to `createRouterLayout`.","symbol":"LayoutResolver","correct":"import type { LayoutResolver } from 'vue-router-layout'"},{"note":"Type import for the options object that can be passed to `createRouterLayout`.","symbol":"RouterLayoutOptions","correct":"import type { RouterLayoutOptions } from 'vue-router-layout'"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport { createRouter, createWebHistory } from 'vue-router';\nimport { createRouterLayout } from 'vue-router-layout';\n\n// Define your layout components\nconst DefaultLayout = { template: '<div><h1>Default Layout</h1><router-view /></div>' };\nconst AdminLayout = { template: '<div><h2>Admin Panel Layout</h2><router-view /></div>' };\n\n// Create <RouterLayout> component.\nconst RouterLayout = createRouterLayout(layout => {\n  if (layout === 'admin') {\n    return Promise.resolve(AdminLayout);\n  }\n  return Promise.resolve(DefaultLayout);\n});\n\nconst routes = [\n  {\n    path: '/',\n    component: RouterLayout,\n    children: [\n      {\n        path: '',\n        component: { template: '<p>Home Page</p>', layout: 'default' },\n      },\n      {\n        path: 'dashboard',\n        component: { template: '<p>Admin Dashboard</p>', layout: { name: 'admin', props: { title: 'Admin' } } },\n      },\n      {\n        path: 'profile',\n        component: { template: '<p>User Profile</p>', layout: 'default' },\n      },\n    ],\n  },\n];\n\nconst router = createRouter({\n  history: createWebHistory(),\n  routes,\n});\n\nconst app = createApp({});\napp.use(router);\napp.mount('#app');\n\n// For a real application, you would render this in an HTML file:\n// <div id=\"app\"></div>\n// <router-view></router-view>","lang":"typescript","description":"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."},"warnings":[{"fix":"Upgrade your project's Vue version to v3+, or downgrade `vue-router-layout` to a `0.1.x` release for Vue 2 compatibility.","message":"Version 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`.","severity":"breaking","affected_versions":">=0.2.0"},{"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.","message":"The `created` hook in page components could be wrongly called when the layout changes, leading to unintended side effects or re-initialization.","severity":"gotcha","affected_versions":">=0.2.0 <0.4.1"},{"fix":"Upgrade to `vue-router-layout@0.4.0` or newer to utilize the `layout.props` option for passing data to your layout components.","message":"Prior 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.","severity":"gotcha","affected_versions":"<0.4.0"},{"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.","message":"Initial 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.","severity":"gotcha","affected_versions":"<0.3.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Downgrade `vue-router-layout` to `0.1.x` for Vue 2 projects, or upgrade your entire project to Vue 3.","cause":"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.","error":"TypeError: app.use is not a function"},{"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> }; } }`","cause":"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.","error":"Property 'layout' does not exist on type 'ComponentOptionsBase<any, any, any, any, any, any, any, any, any>'."},{"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.","cause":"Older versions of `vue-router-layout` had known bugs related to the reactivity and lifecycle of dynamically loaded components within the layout system.","error":"Layout component does not update or render correctly after route navigation, especially with lazy-loaded components."}],"ecosystem":"npm"}