{"id":16462377,"url":"https://github.com/syntaxlexx/v-router-transition","last_synced_at":"2026-03-18T19:50:17.834Z","repository":{"id":33509037,"uuid":"159020062","full_name":"syntaxlexx/v-router-transition","owner":"syntaxlexx","description":"Get awesome vue-router page transitions for your application","archived":false,"fork":false,"pushed_at":"2024-03-26T10:37:36.000Z","size":2945,"stargazers_count":1,"open_issues_count":16,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-22T12:19:44.650Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/syntaxlexx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-25T10:26:05.000Z","updated_at":"2022-10-30T11:22:57.000Z","dependencies_parsed_at":"2024-03-07T15:47:29.979Z","dependency_job_id":"28ced77c-cc98-4a59-82dc-b4291efc0718","html_url":"https://github.com/syntaxlexx/v-router-transition","commit_stats":null,"previous_names":["lexxyungcarter/v-router-transition","lexxyungcarter/vue-router-transitions"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/syntaxlexx/v-router-transition","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syntaxlexx%2Fv-router-transition","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syntaxlexx%2Fv-router-transition/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syntaxlexx%2Fv-router-transition/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syntaxlexx%2Fv-router-transition/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/syntaxlexx","download_url":"https://codeload.github.com/syntaxlexx/v-router-transition/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syntaxlexx%2Fv-router-transition/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30081446,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-04T13:22:36.021Z","status":"ssl_error","status_checked_at":"2026-03-04T13:20:45.750Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-11T11:11:07.113Z","updated_at":"2026-03-04T13:32:39.968Z","avatar_url":"https://github.com/syntaxlexx.png","language":"Vue","funding_links":["https://patreon.com/lexxyungcarter","https://ko-fi.com/acelords"],"categories":[],"sub_categories":[],"readme":"# v-router-transition\n\n[![npm version](https://badge.fury.io/js/v-router-transition.svg)](https://badge.fury.io/js/v-router-transition)\n\nA vue ^2.2.0 awesome vue-router page transitions for your application\n\n## Donating to the project\nIf you've found this useful and would like to buy the maintainers a coffee (or a Tesla, we're not picky), feel free to do so.\n\n\u003ca href=\"https://patreon.com/lexxyungcarter\"\u003e\u003cimg src=\"https://c5.patreon.com/external/logo/become_a_patron_button.png\" alt=\"Patreon donate button\" /\u003e \u003c/a\u003e\n\n\u003ca href=\"https://ko-fi.com/acelords\" target=\"_blank\" title=\"Buy me a Coffee\"\u003e\u003cimg width=\"150\" style=\"border:0px;width:150px;display:block;margin:0 auto\" src=\"https://az743702.vo.msecnd.net/cdn/kofi2.png?v=0\" border=\"0\" alt=\"Buy Me a Coffee at ko-fi.com\" /\u003e\u003c/a\u003e\n\nOr by buying products and merchandise at [Marketplace](https://store.acelords.com).\n\nThis funding is used for maintaining the project and adding new features into Code Style plus other open-source repositories.\n\n## Install\n`npm install v-router-transition --save`\n\nOR\n\n`yarn add v-router-transition`\n\n## Options (Props)\n\n### transition\n- fade (default)\n- slide\n- sliding\n- fade-transform\n\n### mode\n- out-in (default)\n- in-out\n\ne.t.c.\n\n# Usage\nYou can either choose to import the component globally or inside a certain component.\n\n### Globally\nDefine a `Vue.component()` inside your **app.js/main.js**\n```js\nVue.component('v-router-transition', require('v-router-transition'));\n```\n\nthen you can use the component anywhere you choose. Check out the [examples](#examples) for demo usage.\n\n### Locally\nImport and include it in the component's `components` property.\n```js\n// navigation.vue\n\n`import VRouterTransition from 'v-router-transition';`\n\nexport default {\n    components: {\n        VRouterTransition\n    },\n\n    ...\n}\n\n```\n\nAfter declaring the component, you should use the component below the\n`\u003crouter-view\u003e\u003c/router-view\u003e` in your components.\n\n```js\n\u003cv-router-transition transition=\"slide\"\u003e\n    \u003crouter-view\u003e\u003c/router-view\u003e\n\u003c/v-router-transition\u003e\n```\n\n\u003e Check the [examples](#examples) on how to use it in your template\n\n# Examples\nUsing the default options, you just need to pass an id and a model\n```\n\u003cv-router-transition transition=\"sliding\" mode=\"in-out\"\u003e\n    \u003crouter-view\u003e\u003c/router-view\u003e\n\u003c/v-router-transition\u003e\n```\n\nLaravel/Blade/Vue.js\n```php\n// sidebar.blade.php\n\n@php\n    $route = $navigation['route'];\n    $route = isset($navigation['default']) ? route($route, [$navigation['default']]) : route($route);\n@endphp\n\n\u003crouter-link to=\"{{ relativeUrl($route) }}\" tag=\"v-list-tile\"\u003e\n    \u003cv-list-tile-content title=\"{{ relativeUrl($route) }}\"\u003e\n        \u003cv-list-tile-title \u003e\n            {{ $link['name'] }}\n        \u003c/v-list-tile-title\u003e\n    \u003c/v-list-tile-content\u003e\n\u003c/router-link\u003e\n```\n\n```php\n// main.blade.php\n\n@include('layouts.partials.sidebar')\n\n\u003cv-router-transition transition=\"slide\"\u003e\n    \u003crouter-view\u003e\u003c/router-view\u003e\n\u003c/v-router-transition\u003e\n```\n\n## Contribution\nThe package has been kept as simple as possible to offer a starting point for your next project. We are looking for more\ncss page transitions and we would be more than grateful to receive your pull-requests. You can also share a gist containing\nthe css transition for us to add.\n\nCheers!\n\n## Credits\n- [Lexx YungCarter](https://github.com/lexxyungcarter)\n- [maoberlehner](https://github.com/maoberlehner/vue-router-page-transitions)\n\n## Licence\n- MIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyntaxlexx%2Fv-router-transition","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsyntaxlexx%2Fv-router-transition","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyntaxlexx%2Fv-router-transition/lists"}