vue-composition-wrapper

A Vue Composition API wrapper for vue(2.x) vue-router(3.x) vuex(3.x). Let you use Composition API more conveniently in vue 2.x projects.

• Release Notes

Features

• Access Store via useStore in setup.
• Access Route and Router via useRoute and useRouter in setup.
• Add navigation guard via onBeforeRouteLeave and onBeforeRouteUpdate in setup.
• Access the current Vue component instance context via getCurrentInstance in setup.
• Support Typescript.

Installation

# yarn
$ yarn add vue-composition-wrapper

# npm
$ npm i vue-composition-wrapper

APIs

| Docs | Version | Support Vue version | Support vue-router version | | :---: | :---: | :---: | :---: | | Core API for v1 | v1.5.3 | v2.6 and lower | - | | Core API for v2 | v2.1.4 | v2.7 | - | | Core API for v3 | v3.0.0 | v2.7 | ^3.6.5 |

Usage

For Vue(^2.7)

1. In current version of vue-compostion-wrapper, the dependency on @vue/compostion-api has been removed. Directly use the built-in composition API of [email protected].
2. Please install vue-compostion-wrapper@latest. The npm tag is now tagged as latest.

# yarn
$ yarn add vue-composition-wrapper@latest

# npm 
$ npm i vue-composition-wrapper@latest

For Vue(~2.6)

1. To use Composition API in vue(~2.6.x), you need to use @vue/composition-api .

2. @vue/composition-api is included as dependencies of [email protected], so it will be installed automatically. If you already have @vue/composition-api in your project, please uninstall it first. Because if your @vue/composition-api version is too low, it may cause problems.

3. Install @vue/composition-api as a Vue plugin.

// @/plugins/vue-compostion-api.js
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)

Then, import it in your main.js.

// ...

import '@/plugins/vue-composition-api.js'

// ...

4. If your project has not planned to upgrade vue to 2.7.x, and uses the 1.x version of vue-composition-wrapper. Remember to lock the version updates of vue and vue-template-compiler to the patch version of 2.6.

{
  "dependencies": {
    "vue": "~2.6.14"
  },
  "devDependencies": {
    "vue-template-compiler": "~2.6.14"
  }
}