https://github.com/yisibell/vue-composition-wrapper
A composition api wrapper for vue(2.x) vue-router(3.x) vuex(3.x).
https://github.com/yisibell/vue-composition-wrapper
composition-api vue vue-router3 vue2 vueuse vuex3
Last synced: 10 months ago
JSON representation
A composition api wrapper for vue(2.x) vue-router(3.x) vuex(3.x).
- Host: GitHub
- URL: https://github.com/yisibell/vue-composition-wrapper
- Owner: yisibell
- License: mit
- Created: 2021-08-10T05:38:10.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-02-18T02:48:18.000Z (almost 2 years ago)
- Last Synced: 2025-04-09T23:06:42.779Z (10 months ago)
- Topics: composition-api, vue, vue-router3, vue2, vueuse, vuex3
- Language: JavaScript
- Homepage:
- Size: 1.33 MB
- Stars: 13
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](./CHANGELOG.md)
# 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
```bash
# 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 `vue@2.7`.
2. Please install `vue-compostion-wrapper@latest`. The **npm tag** is now tagged as **latest**.
``` bash
# 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 `vue-composition-wrapper@1.x`, 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**.
```js
// @/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`.
```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**.
```json
{
"dependencies": {
"vue": "~2.6.14"
},
"devDependencies": {
"vue-template-compiler": "~2.6.14"
}
}
```