{"id":16227770,"url":"https://github.com/akryum/vue-router-multi-view","last_synced_at":"2025-03-16T12:32:01.608Z","repository":{"id":52080777,"uuid":"111668917","full_name":"Akryum/vue-router-multi-view","owner":"Akryum","description":"router-view meet v-show meet keep-alive","archived":false,"fork":false,"pushed_at":"2021-05-07T17:49:42.000Z","size":1475,"stargazers_count":86,"open_issues_count":34,"forks_count":9,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-10-11T12:53:41.203Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://akryum.github.io/vue-router-multi-view/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Akryum.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"Akryum"}},"created_at":"2017-11-22T10:18:50.000Z","updated_at":"2024-05-13T09:24:46.000Z","dependencies_parsed_at":"2022-08-30T10:01:14.914Z","dependency_job_id":null,"html_url":"https://github.com/Akryum/vue-router-multi-view","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Akryum%2Fvue-router-multi-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Akryum%2Fvue-router-multi-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Akryum%2Fvue-router-multi-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Akryum%2Fvue-router-multi-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Akryum","download_url":"https://codeload.github.com/Akryum/vue-router-multi-view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221663621,"owners_count":16859867,"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-10T12:53:47.645Z","updated_at":"2024-10-27T10:33:42.203Z","avatar_url":"https://github.com/Akryum.png","language":"JavaScript","funding_links":["https://github.com/sponsors/Akryum","https://www.patreon.com/akryum"],"categories":[],"sub_categories":[],"readme":"\u003ch1\u003evue-router-multi-view\u003c/h1\u003e\n\n\u003cp\u003e\n\u003ca href=\"https://www.npmjs.com/package/vue-router-multi-view\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vue-router-multi-view.svg\"/\u003e \u003cimg src=\"https://img.shields.io/npm/dm/vue-router-multi-view.svg\"/\u003e\u003c/a\u003e \u003ca href=\"https://vuejs.org/\"\u003e\u003cimg src=\"https://img.shields.io/badge/vue-2.x-brightgreen.svg\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\n  \u003ca href=\"https://www.patreon.com/akryum\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://c5.patreon.com/external/logo/become_a_patron_button.png\" alt=\"Become a Patreon\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Sponsors\n\n### Gold\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.sumcumo.com/en/\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://cdn.discordapp.com/attachments/258614093362102272/570728242399674380/logo-sumcumo.png\" alt=\"sum.cumo logo\" width=\"400px\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n### Silver\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://vueschool.io/\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://vueschool.io/img/logo/vueschool_logo_multicolor.svg\" alt=\"VueSchool logo\" width=\"200px\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://www.vuemastery.com/\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://cdn.discordapp.com/attachments/258614093362102272/557267759130607630/Vue-Mastery-Big.png\" alt=\"Vue Mastery logo\" width=\"200px\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n### Bronze\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://vuetifyjs.com\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://cdn.discordapp.com/attachments/537832759985700914/537832771691872267/Horizontal_Logo_-_Dark.png\" width=\"100\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://www.frontenddeveloperlove.com/\" target=\"_blank\" title=\"Frontend Developer Love\"\u003e\n    \u003cimg src=\"https://cdn.discordapp.com/attachments/258614093362102272/557267744249085953/frontend_love-logo.png\" width=\"56\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n## About\n\nReplace `\u003crouter-view/\u003e` with `\u003crouter-multi-view/\u003e` to keep the DOM of the deactivated route alive.\n\n\u003cbr\u003e\n\n\u003cimg src=\"https://raw.githubusercontent.com/Akryum/vue-router-multi-view/master/dom.png?token=ACqyfFwilHbGgjKVXt9ptb7GI0nS2zYVks5aHqoqwA%3D%3D\"/\u003e\n\n\u003cbr\u003e\n\n\u003cimg src=\"https://raw.githubusercontent.com/Akryum/vue-router-multi-view/master/devtool.png?token=ACqyfDURGLlC0Gyb0z5xWHOUJCjZhbmYks5aHs85wA%3D%3D\" /\u003e\n\n\u003cbr\u003e\n\n**Useful Links**\n\n- [Live Demo](https://akryum.github.io/vue-router-multi-view/)\n\n\u003cbr\u003e\n\n\n# Installation\n\n## Npm\n\n```\nnpm install --save vue-router-multi-view\n```\n\nInstall the plugin into Vue:\n\n```javascript\nimport Vue from 'vue'\nimport VueRouterMultiView from 'vue-router-multi-view'\n\nVue.use(VueRouterMultiView)\n```\n\nOr use the directives and components directly:\n\n```javascript\nimport Vue from 'vue'\nimport { VueRouterMultiView } from 'vue-router-multi-view'\n\nVue.directive('router-multi-view', VueRouterMultiView)\n```\n\n## Browser\n\nInclude [vue-router-multi-view](/dist/vue-router-multi-view.min.js) in the page.\n\n```html\n\u003cscript src=\"https://unpkg.com/vue-router-multi-view\"\u003e\u003c/script\u003e\n```\n\n**If Vue is detected in the Page, the plugin is installed automatically.**\n\nManually install the plugin into Vue:\n\n```javascript\nVue.use(VueRouterMultiView)\n```\n\n# Usage\n\nReplace `\u003crouter-view/\u003e` with `\u003crouter-multi-view/\u003e` and replace the `name` prop by the `viewName` prop (this is to prevent potential conflicts with `\u003ctransition-group\u003e`).\n\n**:warning: Contrary to `\u003crouter-view/\u003e`, `\u003crouter-multi-view/\u003e` will need to wrap the content with an element or component (default: `\u003cdiv\u003e`).**\n\nIf you were using the [keep-alive](https://vuejs.org/v2/api/#keep-alive) component, you need to remove it. So if you had:\n\n```html\n\u003ckeep-alive\u003e\n  \u003crouter-view /\u003e\n\u003c/keep-alive\u003e\n```\n\nIt should be replaced by:\n\n```html\n\u003crouter-multi-view /\u003e\n```\n\n`\u003crouter-multi-view /\u003e` already includes keep-alive and will trigger the `activated` and `deactivated` hooks on the children components.\n\n**:warning: It is recommended to use [props](https://router.vuejs.org/en/essentials/passing-props.html) for the routes.**\n\nExample:\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003crouter-multi-view view-name=\"header\" /\u003e\n    \u003crouter-multi-view /\u003e\n    \u003crouter-multi-view view-name=\"footer\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\nExample of rendered HTML:\n\n```html\n\u003cdiv\u003e\n  \u003cdiv class=\"page\" data-route-path=\"/c\" style=\"display: none;\"\u003e\n      \u003ch1\u003eNested routes\u003c/h1\u003e\n      \u003cnav\u003e\u003ca href=\"/c/\" class=\"\"\u003eNested 1\u003c/a\u003e \u003ca href=\"/c/nested2\" class=\"\"\u003eNested 2\u003c/a\u003e\u003c/nav\u003e\n      \u003c!----\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"page\" data-route-path=\"/b2/:id\" data-route-name=\"page-b2\" style=\"display: none;\"\u003e\n      \u003ch1\u003eRoute with props params\u003c/h1\u003e\n\n      bar\n  \u003c/div\u003e\n  \u003cdiv class=\"page\" data-route-path=\"\" data-route-name=\"page-a\" data-is-active=\"true\"\u003e\n      \u003ch1\u003eSimple page\u003c/h1\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nYou can change the element or component used to wrap the routes with the `morph` prop:\n\n```html\n\u003crouter-multi-view morph=\"section\" class=\"my-section\" /\u003e\n```\n\nTo use transition, you need to use the `viewName` prop to set the name of the view, to prevent a conflict with the `name` prop for the transition:\n\n```html\n\u003crouter-multi-view\n  class=\"wrapper\"\n\n  view-name=\"default\"\n  morph=\"transition-group\"\n\n  tag=\"div\"\n  name=\"fade\"\n/\u003e\n```\n\nHere `view-name` and `morph` are `\u003crouter-multi-view/\u003e` props, while `tag` and `name` are `\u003ctransition-group\u003e` props.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakryum%2Fvue-router-multi-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakryum%2Fvue-router-multi-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakryum%2Fvue-router-multi-view/lists"}