@intlify/vue-router-composable - npm Package Compare versions

Comparing version 0.0.0-9f94af5 to 0.0.0-f84f443

lib/index.d.ts

@@ -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

lib/v3/index.d.ts

@@ -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

lib/v4/index.d.ts

@@ -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

package.json

 {
   "name": "@intlify/vue-router-composable",
-  "version": "0.0.0-9f94af5",
+  "version": "0.0.0-f84f443",
   "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)"
+  }
 }

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)

No alert changes

Improved metrics

Total package byte prevSize

11644

increased by39.1%

Lines of code

156

increased by5.41%

Number of lines in readme file

148

increased by957.14%

No dependency changes