{"id":16553390,"url":"https://github.com/ktquez/vue-extend-layout","last_synced_at":"2025-04-06T10:11:23.329Z","repository":{"id":57395858,"uuid":"103429785","full_name":"ktquez/vue-extend-layout","owner":"ktquez","description":"Default layout or create custom layouts for the pages of your Vue.js SPA (Multiple layouts)","archived":false,"fork":false,"pushed_at":"2022-08-18T13:27:53.000Z","size":187,"stargazers_count":130,"open_issues_count":4,"forks_count":16,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-30T08:12:20.372Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://vue-layouts2.surge.sh/","language":"Vue","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/ktquez.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-13T17:26:12.000Z","updated_at":"2025-01-18T12:23:24.000Z","dependencies_parsed_at":"2022-09-03T06:02:50.664Z","dependency_job_id":null,"html_url":"https://github.com/ktquez/vue-extend-layout","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktquez%2Fvue-extend-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktquez%2Fvue-extend-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktquez%2Fvue-extend-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktquez%2Fvue-extend-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ktquez","download_url":"https://codeload.github.com/ktquez/vue-extend-layout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247464222,"owners_count":20942970,"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":[],"created_at":"2024-10-11T19:47:59.791Z","updated_at":"2025-04-06T10:11:23.305Z","avatar_url":"https://github.com/ktquez.png","language":"Vue","funding_links":[],"categories":["UI布局","Components \u0026 Libraries","UI Layout","UI Layout [🔝](#readme)"],"sub_categories":["游览","UI Layout","Tour","Form"],"readme":"# vue-extend-layout\nA simple extend the default layout or create custom layouts for your SPA Vue.js, using dynamic import component.\n\n\u003e For vue-extend-layout version 1.* you can access [this link](https://github.com/ktquez/vue-extend-layout/tree/v1.1.3)\n\n## [vue-cli-plugin-layouts](https://github.com/ktquez/vue-cli-plugin-layouts) (vue-cli 3)\nYou can easily add the vue-extend-layout in your vue-cli 3 project.\n\n```shell\nvue add layouts\n```\n\nYou will be asked if you want the plugin to configure the component for you automatically, if you accept, the plugin will create the default layout in the `src/layouts/default.vue` directory and will convert your `App.vue` into a *wrapper* for the layouts, similar to this example (https://github.com/ktquez/vue-extend-layout#in-your-appvue)\n\n---\n\n## Others installations\n\n**NPM**\n```shell\nnpm install vue-extend-layout --save\n```\n\n**Yarn**\n```shell\nyarn add vue-extend-layout\n```\n\n\n## Create and Using layouts\n\nFirst of all:\n- Create a directory called `layouts/` inside the main directory of your application, usually it will be from `src/layouts/`\n- Inside the layout directory create a layout called `default.vue`\n\nFor example:  \n`src/layouts/default.vue`\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cYourHeader /\u003e\n    \u003cYourSidebar /\u003e\n    \u003cdiv class=\"container\"\u003e\n      \u003crouter-view /\u003e\n    \u003c/div\u003e\n    \u003cYourFooter /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    name: 'defaultLayout'     // you can enter any name (optional)\n  }\n\u003c/script\u003e\n\n\u003cstyle\u003e\n/* your style */\n\u003c/style\u003e\n```\n\n#### In your `App.vue`\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cvue-extend-layouts /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport VueExtendLayouts from 'vue-extend-layout'\n\nexport default {\n  name: 'App',\n  components: { VueExtendLayouts }\n}\n\u003c/script\u003e\n```\n\n## Custom extend layout\nTo create a layout you just need to create a component within the layouts directory and name that component.  \n\nFor example:\n`src/layouts/auth.vue`\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cheader-login /\u003e\n    \u003cdiv class=\"container-login\"\u003e\n      \u003crouter-view /\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    name: 'MyNameComponent'   // you can enter any name (optional)\n  }\n\u003c/script\u003e\n\n\u003cstyle\u003e\n/* your style */\n\u003c/style\u003e\n```\n\nAnd to extend this layout in any the desired route, simply include the property `layout: auth` in meta object of the route.\n```javascript\n{\n  path: '/login',\n  name: 'Login',\n  component: () =\u003e import('@/pages/Login'),\n  meta: {\n    layout: 'auth'\n  }\n}\n```\n\n# Create a error layout (Optional)\n\nFor example:\n`src/layouts/error.vue`\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003ch1\u003ePAGE NOT FOUND\u003c/h1\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    name: 'error'       // you can enter any name (optional)\n  }\n\u003c/script\u003e\n\n\u003cstyle\u003e\n/* your style */\n\u003c/style\u003e\n```\n\nAnd in the route add in the 'meta' object the 'layout' property with the name of the layout component, in this case 'error'.\n```javascript\n{\n  path: '*',\n  name: 'Error',\n  // component: () =\u003e import('@/pages/Error') (Optional)\n  meta: {\n    layout: 'error' // name of the layout\n  }\n}\n```\n\n## Defining the directory path of layouts\n\nProp       | Data Type  | default     | Description\n---------- | ---------- | ----------  | -----------\n`path`     | String     | `layouts`   | The layout directory path without a slash at the end\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cvue-extend-layouts path=\"views/layouts\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport VueExtendLayouts from 'vue-extend-layout'\n\nexport default {\n  name: 'App',\n  components: { VueExtendLayouts }\n}\n\u003c/script\u003e\n```\n\nIn this example the layouts will be in `src/views/layouts`\n\n# Loading layout\n\nFor pages that need to load ajax requests and that take a moment to load, you can define a custom layout for a loading effect. Working only reloaded page;\n\n**Attn: Only works when the page refreshes.**\n\nProp       | Data Type  | default  | Description\n---------- | ---------- | -------- | -----------\n`loading`  | String     | `null`   | Set the loading layout for late routes\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cvue-extend-layouts loading=\"loading\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport VueExtendLayouts from 'vue-extend-layout'\n\nexport default {\n  name: 'App',\n  components: { VueExtendLayouts }\n}\n\u003c/script\u003e\n```\n\n**In the above example, the webpack will load the layout `loading.vue`**\n\n\u003e See example: https://vue-layouts2.surge.sh/contact\n\n# Layout prefix\n\nAdd a prefix, avoiding conflict between the components of the layout and its application.\n\nIt also gives you the ability to load layouts according to the user's choices and seasonality, such as loading layouts on commemorative dates, using a new or modified version of the application, internationalization defining a layout template for a particular country, and so on.\n\nProp       | Data Type  | default  | Description\n---------- | ---------- | -------- | -----------\n`prefix`   | String     |          | Set the layout prefix\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cvue-extend-layouts prefix=\"old-\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport VueExtendLayouts from 'vue-extend-layout'\n\nexport default {\n  name: 'App',\n  components: { VueExtendLayouts }\n}\n\u003c/script\u003e\n```\n\n**For example, if the layout is `default.vue` and you add the prefix `old-` the webpack will load the `old-default.vue` layout**\n\n\u003e Example coming soon\n\n# Contributing\n\n- Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found.\n- Fork repository, make changes, add your name and link in the contributors session readme.md\n- Send a pull request\n\nIf you want a faster communication, check out my blog [ktquez.com](https://ktquez.com) or find me on Twitter [@ktquez](https://twitter.com/ktquez)\n\nThank you for using!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fktquez%2Fvue-extend-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fktquez%2Fvue-extend-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fktquez%2Fvue-extend-layout/lists"}