@intlify/vue-router-composable
Advanced tools
Comparing version 0.0.0-9f94af5 to 0.0.0-b5558e5
@@ -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-9f94af5", | ||
"version": "0.0.0-b5558e5", | ||
"description": "The universal composable for Vue Router", | ||
@@ -65,4 +65,3 @@ "peerDependencies": { | ||
"postinstall": "node ./scripts/postinstall.js" | ||
}, | ||
"readme": "# @intlify/vue-router-composable\n\nThe universal composable for Vue Router\n\nWIP: 👷\n\n## 🌟 Features\n- Vue Router composable APIs available on Vue 2 & Vue 3\n- Auto detect Vue Router version on bundling\n- Manual switch versions\n\n## ©️ License\n\n[MIT](http://opensource.org/licenses/MIT)" | ||
} | ||
} |
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 | ||
```sh | ||
# npm | ||
npm install @intlify/vue-router-composable | ||
# yarn | ||
yarn add @intlify/vue-router-composable | ||
# pnpm | ||
pnpm add @intlify/vue-router-composable | ||
``` | ||
## ⛓️ Dependencies | ||
You need to 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" // or "^4.0.0" base on your preferred working environment | ||
}, | ||
"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 Router 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 | ||
`@intlify/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
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
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
11644
156
148