{"id":26646807,"url":"https://github.com/stacksjs/vite-plugin-layouts","last_synced_at":"2025-04-11T02:12:17.966Z","repository":{"id":282937615,"uuid":"950140647","full_name":"stacksjs/vite-plugin-layouts","owner":"stacksjs","description":"🧩 Router-based layouts for your application.","archived":false,"fork":false,"pushed_at":"2025-03-31T14:06:25.000Z","size":685,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-01T01:21:56.922Z","etag":null,"topics":["hmr","layouts","plugin","router","vite","vite-plugin","vue"],"latest_commit_sha":null,"homepage":"https://vite-plugin-layouts.netlify.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stacksjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["stacksjs","chrisbbreuer"],"open_collective":"stacksjs"}},"created_at":"2025-03-17T17:35:47.000Z","updated_at":"2025-03-17T21:39:23.000Z","dependencies_parsed_at":"2025-03-17T19:27:21.463Z","dependency_job_id":null,"html_url":"https://github.com/stacksjs/vite-plugin-layouts","commit_stats":null,"previous_names":["stacksjs/vite-plugin-layouts"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stacksjs%2Fvite-plugin-layouts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stacksjs%2Fvite-plugin-layouts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stacksjs%2Fvite-plugin-layouts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stacksjs%2Fvite-plugin-layouts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stacksjs","download_url":"https://codeload.github.com/stacksjs/vite-plugin-layouts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248027407,"owners_count":21035594,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hmr","layouts","plugin","router","vite","vite-plugin","vue"],"created_at":"2025-03-24T23:39:55.871Z","updated_at":"2025-04-11T02:12:17.936Z","avatar_url":"https://github.com/stacksjs.png","language":"TypeScript","funding_links":["https://github.com/sponsors/stacksjs","https://github.com/sponsors/chrisbbreuer","https://opencollective.com/stacksjs"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\".github/art/cover.jpg\" alt=\"Social Card of this repo\"\u003e\u003c/p\u003e\n\n[![npm version][npm-version-src]][npm-version-href]\n[![GitHub Actions][github-actions-src]][github-actions-href]\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n\u003c!-- [![npm downloads][npm-downloads-src]][npm-downloads-href] --\u003e\n\u003c!-- [![Codecov][codecov-src]][codecov-href] --\u003e\n\n# vite-plugin-layouts\n\n\u003e Router based layouts for Vue 3 applications using Vite.\n\n## Features\n\n- 📁 **File Based** _Layouts are stored in `/src/layouts` as standard Vue components_\n- 🔄 **Sensible Defaults** _Pages without a layout use `default.vue` automatically_\n- 🌐 **Multiple Layouts** _Support for multiple layout directories_\n- 🎨 **Meta Configuration** _Specify layouts via route blocks in your pages_\n- 🔌 **Router Integration** _Pairs with `unplugin-vue-router`_\n- 📱 **HMR Optimized** _Client-side layout mode for faster HMR_\n- 🛠️ **Flexible Configuration** _Customize layout directories, exclusions, and more_\n\n## Install\n\n```bash\nnpm install -D vite-plugin-layouts\n# or\nyarn add -D vite-plugin-layouts\n# or\npnpm add -D vite-plugin-layouts\n# or\nbun add -D vite-plugin-layouts\n```\n\n## Get Started\n\n```ts\n// vite.config.ts\nimport Vue from '@vitejs/plugin-vue'\nimport { defineConfig } from 'vite'\nimport Layouts from 'vite-plugin-layouts'\nimport Pages from 'vite-plugin-pages'\n\nexport default defineConfig({\n  plugins: [\n    Vue(),\n    Pages(),\n    Layouts()\n  ]\n})\n```\n\nThen in your main.ts file:\n\n```ts\n// main.ts\nimport { setupLayouts } from 'virtual:generated-layouts'\nimport { createRouter } from 'vue-router'\nimport generatedRoutes from '~pages'\n\nconst routes = setupLayouts(generatedRoutes)\n\nconst router = createRouter({\n  // ...\n  routes,\n})\n```\n\nIf you're using `unplugin-vue-router`:\n\n```ts\n// main.ts\nimport { setupLayouts } from 'virtual:generated-layouts'\nimport { createRouter } from 'vue-router/auto'\n\nconst router = createRouter({\n  // ...\n  extendRoutes: routes =\u003e setupLayouts(routes),\n})\n```\n\n### TypeScript Support\n\nIf you want type definition for the virtual modules, add the following to your `tsconfig.json`:\n\n```json\n{\n  \"compilerOptions\": {\n    \"types\": [\"vite-plugin-layouts/client\"]\n  }\n}\n```\n\n## Usage\n\nLayouts are stored in the `/src/layouts` folder by default and are standard Vue components with a `\u003crouter-view\u003e\u003c/router-view\u003e` in the template.\n\nYou can specify which layout to use for a page by using a route block:\n\n```vue\n\u003croute lang=\"yaml\"\u003e\nmeta:\n  layout: users\n\u003c/route\u003e\n```\n\nThis will look for `/src/layouts/users.vue` for the page's layout. If no layout is specified, it will use `default.vue`.\n\n## Configuration\n\n```ts\n// vite.config.ts\nimport Vue from '@vitejs/plugin-vue'\nimport { defineConfig } from 'vite'\nimport Layouts from 'vite-plugin-layouts'\nimport Pages from 'vite-plugin-pages'\n\nexport default defineConfig({\n  plugins: [\n    Vue(),\n    Pages(),\n    Layouts({\n      layoutsDirs: 'src/layouts', // default: 'src/layouts'\n      pagesDirs: 'src/pages', // default: 'src/pages'\n      defaultLayout: 'default', // default: 'default'\n      exclude: [], // Patterns to exclude from layout loading\n    })\n  ]\n})\n```\n\n### Available Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `layoutsDirs` | `string \\| string[]` | `'src/layouts'` | Path(s) to the layouts directory. Supports globs. |\n| `pagesDirs` | `string \\| string[] \\| null` | `'src/pages'` | Path(s) to the pages directory. Set to null to watch all files. |\n| `defaultLayout` | `string` | `'default'` | Name of the default layout to use when none is specified. |\n| `exclude` | `string[]` | `[]` | Patterns to exclude from layout loading. Files named `__*__.vue` are automatically excluded. |\n\n### Advanced Configuration: ClientSideLayout\n\nFor faster HMR and more efficient loading, you can use the ClientSideLayout mode:\n\n```ts\n// vite.config.ts\nimport Vue from '@vitejs/plugin-vue'\nimport { defineConfig } from 'vite'\nimport { ClientSideLayout } from 'vite-plugin-layouts'\nimport Pages from 'vite-plugin-pages'\n\nexport default defineConfig({\n  plugins: [\n    Vue(),\n    Pages(),\n    ClientSideLayout({\n      layoutsDir: 'src/layouts', // default: 'src/layouts'\n      defaultLayout: 'default', // default: 'default'\n      importMode: 'sync' // Auto-detect: 'sync' for SSG, 'async' for others\n    })\n  ]\n})\n```\n\n## How It Works\n\nThe `setupLayouts` function transforms your routes by:\n\n1. Replacing pages with their specified layouts\n2. Making the original pages children of their layouts\n\nThis creates nested routes with the same paths, giving you full access to the vue-router API.\n\n## Common Patterns\n\n### Transitions Between Routes\n\nTo add transitions between routes, including when using the same layout:\n\n```html\n\u003c!-- App.vue --\u003e\n\u003ctemplate\u003e\n  \u003crouter-view v-slot=\"{ Component, route }\"\u003e\n    \u003ctransition name=\"slide\"\u003e\n      \u003ccomponent :is=\"Component\" :key=\"route\" /\u003e\n    \u003c/transition\u003e\n  \u003c/router-view\u003e\n\u003c/template\u003e\n```\n\n### Passing Data from Layout to Page\n\nUse props to pass data down from layout to page:\n\n```html\n\u003crouter-view foo=\"bar\" /\u003e\n```\n\n### Setting Static Data for a Layout\n\nUse the route's meta property in your page:\n\n```vue\n\u003c!-- page.vue --\u003e\n\u003ctemplate\u003e\n  \u003cdiv\u003eContent\u003c/div\u003e\n\u003c/template\u003e\n\n\u003croute lang=\"yaml\"\u003e\nmeta:\n  layout: default\n  bgColor: yellow\n\u003c/route\u003e\n```\n\nThen in your layout:\n\n```vue\n\u003c!-- layout.vue --\u003e\n\u003cscript setup\u003e\nimport { useRouter } from 'vue-router'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv :style=\"`background: ${useRouter().currentRoute.value.meta.bgColor};`\"\u003e\n    \u003crouter-view /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n### Dynamic Data from Page to Layout\n\nUse custom events to pass data from page to layout:\n\n```vue\n\u003c!-- page.vue --\u003e\n\u003cscript setup\u003e\nimport { defineEmits } from 'vue'\nconst emit = defineEmits(['setColor'])\n\nif (2 + 2 === 4)\n  emit('setColor', 'green')\nelse\n  emit('setColor', 'red')\n\u003c/script\u003e\n```\n\nListen for the events in your layout:\n\n```vue\n\u003c!-- layout.vue --\u003e\n\u003cscript setup\u003e\nimport { ref } from 'vue'\n\nconst bgColor = ref('yellow')\nfunction setBg(color) {\n  bgColor.value = color\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cmain :style=\"`background: ${bgColor};`\"\u003e\n    \u003crouter-view @set-color=\"setBg\" /\u003e\n  \u003c/main\u003e\n\u003c/template\u003e\n```\n\n## Testing\n\n```bash\nbun test\n```\n\n## Changelog\n\nPlease see our [releases](https://github.com/stacksjs/vite-plugin-layouts/releases) page for more information on what has changed recently.\n\n## Contributing\n\nPlease review the [Contributing Guide](https://github.com/stacksjs/contributing) for details.\n\n## Community\n\nFor help, discussion about best practices, or any other conversation that would benefit from being searchable:\n\n[Discussions on GitHub](https://github.com/stacksjs/stacks/discussions)\n\nFor casual chit-chat with others using this package:\n\n[Join the Stacks Discord Server](https://discord.gg/stacksjs)\n\n## Postcardware\n\n\"Software that is free, but hopes for a postcard.\" We love receiving postcards from around the world showing where `vite-plugin-layouts` is being used! We showcase them on our website too.\n\nOur address: Stacks.js, 12665 Village Ln #2306, Playa Vista, CA 90094, United States 🌎\n\n## Sponsors\n\nWe would like to extend our thanks to the following sponsors for funding Stacks development. If you are interested in becoming a sponsor, please reach out to us.\n\n- [JetBrains](https://www.jetbrains.com/)\n- [The Solana Foundation](https://solana.com/)\n\n## Credits\n\n- [JohnCampionJr](https://github.com/JohnCampionJr) - Creator of original vite-plugin-vue-layouts\n- [Chris Breuer](https://github.com/chrisbbreuer)\n- [All Contributors](https://github.com/stacksjs/vite-plugin-layouts/contributors)\n\n## License\n\nThe MIT License (MIT). Please see [LICENSE](https://github.com/stacksjs/stacks/tree/main/LICENSE.md) for more information.\n\nMade with 💙\n\n\u003c!-- Badges --\u003e\n[npm-version-src]: https://img.shields.io/npm/v/vite-plugin-layouts?style=flat-square\n[npm-version-href]: https://npmjs.com/package/vite-plugin-layouts\n[github-actions-src]: https://img.shields.io/github/actions/workflow/status/stacksjs/vite-plugin-layouts/ci.yml?style=flat-square\u0026branch=main\n[github-actions-href]: https://github.com/stacksjs/vite-plugin-layouts/actions?query=workflow%3Aci\n\n\u003c!-- [codecov-src]: https://img.shields.io/codecov/c/gh/stacksjs/vite-plugin-layouts/main?style=flat-square\n[codecov-href]: https://codecov.io/gh/stacksjs/vite-plugin-layouts --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstacksjs%2Fvite-plugin-layouts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstacksjs%2Fvite-plugin-layouts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstacksjs%2Fvite-plugin-layouts/lists"}