Nefarious Pickle Muncher

    @intlify/vue-router-bridge
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.6 • Public • Published

    @intlify/vue-router-bridge

    Vue Router bridging for Vue 2 & Vue 3

    This library is inspired by vue-demi

    🌟 Features

    • Vue Router composable APIs available on Vue 2 & Vue 3
      • useRouter
      • useRoute
    • Stubbed Vue Router 4 APIs on Vue Router 3
      • About details here
    • Auto detect Vue Router version on bundling
    • Manual switch versions

    💿 Installation

    # npm
    npm install @intlify/vue-router-bridge
    
    # yarn
    yarn add @intlify/vue-router-bridge
    
    # pnpm
    pnpm add @intlify/vue-router-bridge

    ⛓️ Dependencies

    You need to add vue-router and @vue/composition-api to your plugin's peer dependencies to specify what versions you support.

    {
      "dependencies": {
        "@intlify/vue-router-bridge": "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.

    import { useRouter, useRoute } from '@intlify/vue-router-bridge'

    When using with Vite, you will need to opt-out the pre-bundling to get @intlify/vue-router-bridge work properly by

    // vite.config.js
    export default defineConfig({
      optimizeDeps: {
        exclude: ['@intlify/vue-router-bridge']
     }
    })

    🤝 Extra APIs

    @intlify/vue-router-bridge provides extra APIs to help distinguish users' environments and to do some version-specific logic.

    isVueRouter3 / isVueRouter4

    import { isVueRouter3, isVueRouter4 } from '@intlify/vue-router-bridge'
    
    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

    npx vue-router-switch 3
    # or
    npx vue-router-switch 4

    📦 Package Aliasing

    If you would like to import vue-router under an alias, you can use the following command:

    npx vue-router-switch 3 vue-router3
    # or
    npx vue-router-switch 4 vue-router4

    🩹 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:

    npx vue-router-fix

    ✳️ Isomorphic Testings

    You can support testing for both versions by adding npm alias in your dev dependencies. For example:

    {
      "scripts": {
        "test:3": "vue-router-switch 3 vue-router3 && jest",
        "test:4": "vue-router-switch 4 && jest",
      },
      "devDependencies": {
        "vue-router": "^4.0.0",
        "vue-router3": "npm:vue-router@3"
      },
    }

    or

    {
      "scripts": {
        "test:3": "vue-router-switch 3 && jest",
        "test:4": "vue-router-switch 4 vue-router4 && jest",
      },
      "devDependencies": {
        "vue-router": "^3.0.0",
        "vue-router4": "npm:vue-router@4"
      },
    }

    💖 Thanks

    This package idea was inspired from vue-demi, @antfu's great work!

    ©️ License

    MIT

    Install

    npm i @intlify/vue-router-bridge

    DownloadsWeekly Downloads

    524

    Version

    0.3.6

    License

    MIT

    Unpacked Size

    35.8 kB

    Total Files

    17

    Last publish

    Collaborators

    • kazupon
    • ota-meshi