Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: vuejs/composition-api
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v0.6.6
Choose a base ref
...
head repository: vuejs/composition-api
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: v0.6.7
Choose a head ref
  • 8 commits
  • 19 files changed
  • 2 contributors

Commits on Jun 22, 2020

  1. chore: Create LICENSE (#369)

    antfu authored Jun 22, 2020

    Unverified

    This user has not yet uploaded their public signing key.
    Copy the full SHA
    5d4da69 View commit details
  2. Unverified

    This user has not yet uploaded their public signing key.
    Copy the full SHA
    58d8d9a View commit details

Commits on Jun 24, 2020

  1. feat: export nextTick (#401)

    * feat: export nextTick
    
    * chore: update
    antfu authored Jun 24, 2020

    Unverified

    This user has not yet uploaded their public signing key.
    Copy the full SHA
    d70c904 View commit details
  2. fix(toRefs): do not warn when toRefs is called in a prop value (#405)

    * fix(toRefs): do not warn when toRefs is called in a prop value
    
    * chore: comments
    
    * Update test/setup.spec.js
    
    Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
    
    Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
    pikax and antfu authored Jun 24, 2020
    Copy the full SHA
    048b6d3 View commit details
  3. fix(type): improve defineComponent type for option apis (#406)

    * fix(type): improve defineComponent type for option apis
    
    * test: add dts tests for defineComponent
    fix
    antfu authored Jun 24, 2020
    Copy the full SHA
    1c64108 View commit details
  4. Copy the full SHA
    77ba15b View commit details
  5. docs: update readme

    antfu committed Jun 24, 2020
    2
    Copy the full SHA
    32dac53 View commit details
  6. chore: release v0.6.7

    antfu committed Jun 24, 2020
    Copy the full SHA
    ca29201 View commit details
9 changes: 1 addition & 8 deletions .github/workflows/nodejs.yml
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
name: Build & Test

on:
push:
branches:
- master
pull_request:
branches:
- master
on: [push, pull_request]

jobs:
build:
@@ -31,4 +25,3 @@ jobs:
run: yarn test-unit
env:
CI: true

17 changes: 17 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,20 @@
<a name="0.6.7"></a>
## [0.6.7](https://github.com/vuejs/composition-api/compare/v0.6.6...v0.6.7) (2020-06-24)


### Bug Fixes

* **toRefs:** do not warn when toRefs is called in a prop value ([#405](https://github.com/vuejs/composition-api/issues/405)) ([048b6d3](https://github.com/vuejs/composition-api/commit/048b6d3))
* **type:** improve defineComponent type for option apis ([#406](https://github.com/vuejs/composition-api/issues/406)) ([1c64108](https://github.com/vuejs/composition-api/commit/1c64108))


### Features

* auto install when using CDN ([#403](https://github.com/vuejs/composition-api/issues/403)) ([77ba15b](https://github.com/vuejs/composition-api/commit/77ba15b))
* export nextTick ([#401](https://github.com/vuejs/composition-api/issues/401)) ([d70c904](https://github.com/vuejs/composition-api/commit/d70c904))



<a name="0.6.6"></a>
## [0.6.6](https://github.com/vuejs/composition-api/compare/v0.6.5...v0.6.6) (2020-06-21)

21 changes: 21 additions & 0 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
MIT License

Copyright (c) 2019-present, liximomo(X.L)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
102 changes: 35 additions & 67 deletions README.md
Original file line number Diff line number Diff line change
@@ -12,95 +12,66 @@ English | [**中文文档**](./README.zh-CN.md) / [**Composition API RFC**](http

---

# Navigation
## Installation

- [Installation](#Installation)
- [Usage](#Usage)
- [TypeScript](#TypeScript)
- [TSX](#tsx)
- [Limitations](#Limitations)
- [Changelog](https://github.com/vuejs/composition-api/blob/master/CHANGELOG.md)

# Installation

**npm**
### NPM

```bash
npm install @vue/composition-api
```

**yarn**

```bash
# or
yarn add @vue/composition-api
```

**CDN**
You must install `@vue/composition-api` as a plugin via `Vue.use()` before you can use the [Composition API](https://composition-api.vuejs.org/) to compose your component.

```html
<script src="https://unpkg.com/@vue/composition-api/dist/vue-composition-api.umd.js"></script>
```js
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)
```

By using the global variable `window.vueCompositionApi`
```js
// use the APIs
import { ref, reactive } from '@vue/composition-api'
```

# Usage
> :bulb: When you migrate to Vue 3, just replacing `@vue/composition-api` to `vue` and your code should just work.
You must install `@vue/composition-api` via `Vue.use()` before using other APIs:
### CDN

```js
import Vue from 'vue';
import VueCompositionApi from '@vue/composition-api';
Include `@vue/composition-api` after Vue and it will install itself automatically.

Vue.use(VueCompositionApi);
<!--cdn-links-start-->
```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@0.6.7"></script>
```
<!--cdn-links-end-->

After installing the plugin you can use the [Composition API](https://vue-composition-api-rfc.netlify.com/) to compose your component.
`@vue/composition-api` will be exposed to global variable `window.vueCompositionApi`.

# TypeScript
```ts
const { ref, reactive } = vueCompositionApi
```

## TypeScript Support

**This plugin requires TypeScript version >3.5.1. If you are using vetur, make sure to set `vetur.useWorkspaceDependencies` to `true`.**
> TypeScript version **>3.5.1** is required
To let TypeScript properly infer types inside Vue component options, you need to define components with `defineComponent`:
To let TypeScript properly infer types inside Vue component options, you need to define components with `defineComponent`

```ts
import { defineComponent } from '@vue/composition-api';
import { defineComponent } from '@vue/composition-api'

const Component = defineComponent({
export default defineComponent({
// type inference enabled
});

const Component = {
// this will NOT have type inference,
// because TypeScript can't tell this is options for a Vue component.
};
})
```

## TSX

:rocket: An Example [Repository](https://github.com/liximomo/vue-composition-api-tsx-example) with TS and TSX support is provided to help you start.

To support TSX, create a declaration file with following content in your project.
### JSX/TSX

```ts
// file: shim-tsx.d.ts
import Vue, { VNode } from 'vue';
import { ComponentRenderProxy } from '@vue/composition-api';

declare global {
namespace JSX {
// tslint:disable no-empty-interface
interface Element extends VNode {}
// tslint:disable no-empty-interface
interface ElementClass extends ComponentRenderProxy {}
interface ElementAttributesProperty {
$props: any; // specify the property name to use
}
interface IntrinsicElements {
[elem: string]: any;
}
}
}
```
To make JSX/TSX work with `@vue/composition-api`, check out [babel-preset-vca-jsx](https://github.com/luwanquan/babel-preset-vca-jsx) by [@luwanquan](https://github.com/luwanquan).

# Limitations

@@ -304,11 +275,8 @@ You may also need to augment the `SetupContext` when working with TypeScript:

```ts
import Vue from 'vue';
import VueCompositionApi from '@vue/composition-api';

Vue.use(VueCompositionApi);

declare module '@vue/composition-api/dist/component/component' {
declare module '@vue/composition-api' {
interface SetupContext {
readonly refs: { [key: string]: Vue | Element | Vue[] | Element[] };
}
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@vue/composition-api",
"version": "0.6.6",
"version": "0.6.7",
"description": "Provide logic composition capabilities for Vue.",
"keywords": [
"vue",
1 change: 1 addition & 0 deletions src/component/common.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export type Data = { [key: string]: unknown }
161 changes: 0 additions & 161 deletions src/component/component.ts

This file was deleted.

Loading