Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@intlify/vue-router-composable
Advanced tools
@intlify/vue-router-composable - npm Package Compare versions
Comparing version 0.0.0-4d9b3bb to 0.0.0-78e04ae
@@ -1,3 +0,6 @@ | ||
| import { useRouter, useRoute } from 'vue-router' | ||
| import type { RouteLocationNormalizedLoaded, Router } from 'vue-router' | ||
| declare function useRouter<T = Router>(): T | ||
| declare function useRoute<T = RouteLocationNormalizedLoaded>(): T | ||
| declare const isVueRouter3: boolean | ||
@@ -4,0 +7,0 @@ declare const isVueRouter4: boolean |
@@ -6,4 +6,4 @@ import VueRouter from 'vue-router' | ||
| declare const useRouter: () => VueRouter | ||
| declare const useRoute: () => ComputedRef<Route> | ||
| declare function useRouter<T = VueRouter>(): T | ||
| declare function useRoute<T = ComputedRef<Route>>(): T | ||
@@ -10,0 +10,0 @@ declare const isVueRouter3: boolean |
@@ -1,3 +0,6 @@ | ||
| import { useRouter, useRoute } from 'vue-router' | ||
| import type { RouteLocationNormalizedLoaded, Router } from 'vue-router' | ||
| declare function useRouter<T = Router>(): T | ||
| declare function useRoute<T = RouteLocationNormalizedLoaded>(): T | ||
| declare const isVueRouter3: boolean | ||
@@ -4,0 +7,0 @@ declare const isVueRouter4: boolean |
| { | ||
| "name": "@intlify/vue-router-composable", | ||
| "version": "0.0.0-4d9b3bb", | ||
| "version": "0.0.0-78e04ae", | ||
| "description": "The universal composable for Vue Router", | ||
@@ -65,3 +65,4 @@ "peerDependencies": { | ||
| "postinstall": "node ./scripts/postinstall.js" | ||
| } | ||
| }, | ||
| "readme": "# @intlify/vue-router-composable\n\nThe universal composable APIs for Vue Router\n\n> This library is inspired by [vue-demi](https://github.com/vueuse/vue-demi)\n\n## 🌟 Features\n- Vue Router composable APIs available on Vue 2 & Vue 3\n - `useRouter`\n - `useRoute`\n- Auto detect Vue Router version on bundling\n- Manual switch versions\n## 💿 Installation\n\n```\n# npm\nnpm install @intlify/vue-router-composable\n\n# yarn\nyarn add @intlify/vue-router-composable\n\n# pnpm\npnpm add @intlify/vue-router-composable\n```\n\n## ⛓️ Dependencies\n\nAdd `vue-router` and `@vue/composition-api` to your plugin's peer dependencies to specify what versions you support.\n\n```js\n{\n \"dependencies\": {\n \"@intlify/vue-router-composable\": \"latest\"\n },\n \"peerDependencies\": {\n \"@vue/composition-api\": \"^1.0.0-rc.1\",\n \"vue-router\": \"^3.0.0 || ^4.0.0\"\n },\n \"peerDependenciesMeta\": {\n \"@vue/composition-api\": {\n \"optional\": true\n }\n },\n \"devDependencies\": {\n \"vue-router\": \"^3.0.0\" // or \"^4.0.0\" base on your preferred working environment\n },\n}\n```\n\nImport everything related to Vue from it, it will redirect to `vue-router@3` + `@vue/composition-api` or `vue-router@4` based on users' environments.\n\n```js\nimport { useRouter, useRoute } from '@intlify/vue-router-composable'\n```\n\nWhen using with [Vite](https://vitejs.dev), you will need to opt-out the pre-bundling to get `@intlify/vue-router-composable` work properly by\n\n```js\n// vite.config.js\nexport default defineConfig({\n optimizeDeps: {\n exclude: ['@intlify/vue-router-composable']\n }\n})\n```\n\n## 🤝 Extra APIs\n\nVue Router Composable provides extra APIs to help distinguish users' environments and to do some version-specific logic.\n\n### `isVueRouter3` / `isVueRouter4`\n\n```js\nimport { isVueRouter3, isVueRouter4 } from '@intlify/vue-router-composable'\n\nif (isVueRouter3) {\n // Vue Router 3 only\n} else {\n // Vue Router 4 only\n}\n```\n\n## 📺 CLI\n\nTo explicitly switch the redirecting version, you can use these commands in your project's root:\n### 🤏 Manually Switch Versions\n\n```sh\nnpx vue-router-switch 2\n# or\nnpx vue-router-switch 3\n```\n\n### 📦 Package Aliasing\n\nIf you would like to import `vue-router` under an alias, you can use the following command:\n\n```sh\nnpx vue-router-switch 2 vue2\n# or\nnpx vue-router-switch 3 vue3\n```\n### 🩹 Auto Fix\n\nIf the postinstall hook doesn't get triggered or you have updated the Vue Router version, try to run the following command to resolve the redirecting:\n\n```sh\nnpx vue-router-fix\n```\n### ✳️ Isomorphic Testings\n\nYou can support testing for both versions by adding npm alias in your dev dependencies. For example:\n\n```js\n{\n \"scripts\": {\n \"test:3\": \"vue-router-switch 2 vue-router3 && jest\",\n \"test:4\": \"vue-router-switch 3 && jest\",\n },\n \"devDependencies\": {\n \"vue-router\": \"^4.0.0\",\n \"vue-router3\": \"npm:vue-router@3\"\n },\n}\n```\n\nor\n\n```js\n{\n \"scripts\": {\n \"test:3\": \"vue-router-switch 4 && jest\",\n \"test:4\": \"vue-router-switch 4 vue-router4 && jest\",\n },\n \"devDependencies\": {\n \"vue-router\": \"^3.0.0\",\n \"vue-router4\": \"npm:vue-router@43\"\n },\n}\n```\n\n## 💖 Thanks\nThis package idea was inspired from [vue-demi](https://github.com/vueuse/vue-demi), [@antfu](https://github.com/antfu)s great work!\n\n## ©️ License\n\n[MIT](http://opensource.org/licenses/MIT)\n" | ||
| } |
139
README.md
| # @intlify/vue-router-composable | ||
| The universal composable for Vue Router | ||
| The universal composable APIs for Vue Router | ||
| WIP: 👷 | ||
| > This library is inspired by [vue-demi](https://github.com/vueuse/vue-demi) | ||
| ## 🌟 Features | ||
| - Vue Router composable APIs available on Vue 2 & Vue 3 | ||
| - `useRouter` | ||
| - `useRoute` | ||
| - Auto detect Vue Router version on bundling | ||
| - Manual switch versions | ||
| ## 💿 Installation | ||
| ``` | ||
| # npm | ||
| npm install @intlify/vue-router-composable | ||
| # yarn | ||
| yarn add @intlify/vue-router-composable | ||
| # pnpm | ||
| pnpm add @intlify/vue-router-composable | ||
| ``` | ||
| ## ⛓️ Dependencies | ||
| Add `vue-router` and `@vue/composition-api` to your plugin's peer dependencies to specify what versions you support. | ||
| ```js | ||
| { | ||
| "dependencies": { | ||
| "@intlify/vue-router-composable": "latest" | ||
| }, | ||
| "peerDependencies": { | ||
| "@vue/composition-api": "^1.0.0-rc.1", | ||
| "vue-router": "^3.0.0 || ^4.0.0" | ||
| }, | ||
| "peerDependenciesMeta": { | ||
| "@vue/composition-api": { | ||
| "optional": true | ||
| } | ||
| }, | ||
| "devDependencies": { | ||
| "vue-router": "^3.0.0" // or "^4.0.0" base on your preferred working environment | ||
| }, | ||
| } | ||
| ``` | ||
| Import everything related to Vue from it, it will redirect to `vue-router@3` + `@vue/composition-api` or `vue-router@4` based on users' environments. | ||
| ```js | ||
| import { useRouter, useRoute } from '@intlify/vue-router-composable' | ||
| ``` | ||
| When using with [Vite](https://vitejs.dev), you will need to opt-out the pre-bundling to get `@intlify/vue-router-composable` work properly by | ||
| ```js | ||
| // vite.config.js | ||
| export default defineConfig({ | ||
| optimizeDeps: { | ||
| exclude: ['@intlify/vue-router-composable'] | ||
| } | ||
| }) | ||
| ``` | ||
| ## 🤝 Extra APIs | ||
| Vue Router Composable provides extra APIs to help distinguish users' environments and to do some version-specific logic. | ||
| ### `isVueRouter3` / `isVueRouter4` | ||
| ```js | ||
| import { isVueRouter3, isVueRouter4 } from '@intlify/vue-router-composable' | ||
| if (isVueRouter3) { | ||
| // Vue Router 3 only | ||
| } else { | ||
| // Vue Router 4 only | ||
| } | ||
| ``` | ||
| ## 📺 CLI | ||
| To explicitly switch the redirecting version, you can use these commands in your project's root: | ||
| ### 🤏 Manually Switch Versions | ||
| ```sh | ||
| npx vue-router-switch 2 | ||
| # or | ||
| npx vue-router-switch 3 | ||
| ``` | ||
| ### 📦 Package Aliasing | ||
| If you would like to import `vue-router` under an alias, you can use the following command: | ||
| ```sh | ||
| npx vue-router-switch 2 vue2 | ||
| # or | ||
| npx vue-router-switch 3 vue3 | ||
| ``` | ||
| ### 🩹 Auto Fix | ||
| If the postinstall hook doesn't get triggered or you have updated the Vue Router version, try to run the following command to resolve the redirecting: | ||
| ```sh | ||
| npx vue-router-fix | ||
| ``` | ||
| ### ✳️ Isomorphic Testings | ||
| You can support testing for both versions by adding npm alias in your dev dependencies. For example: | ||
| ```js | ||
| { | ||
| "scripts": { | ||
| "test:3": "vue-router-switch 2 vue-router3 && jest", | ||
| "test:4": "vue-router-switch 3 && jest", | ||
| }, | ||
| "devDependencies": { | ||
| "vue-router": "^4.0.0", | ||
| "vue-router3": "npm:vue-router@3" | ||
| }, | ||
| } | ||
| ``` | ||
| or | ||
| ```js | ||
| { | ||
| "scripts": { | ||
| "test:3": "vue-router-switch 4 && jest", | ||
| "test:4": "vue-router-switch 4 vue-router4 && jest", | ||
| }, | ||
| "devDependencies": { | ||
| "vue-router": "^3.0.0", | ||
| "vue-router4": "npm:vue-router@43" | ||
| }, | ||
| } | ||
| ``` | ||
| ## 💖 Thanks | ||
| This package idea was inspired from [vue-demi](https://github.com/vueuse/vue-demi), [@antfu](https://github.com/antfu)s great work! | ||
| ## ©️ License | ||
| [MIT](http://opensource.org/licenses/MIT) | ||
| [MIT](http://opensource.org/licenses/MIT) |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by87.62%
15109
- Lines of code
- increased by5.41%
156
- Number of lines in readme file
- increased by957.14%
148
No dependency changes