Skip to content

Commit 32dac53

Browse files
committed
docs: update readme
1 parent 77ba15b commit 32dac53

File tree

1 file changed

+35
-67
lines changed

1 file changed

+35
-67
lines changed

README.md

Lines changed: 35 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -12,95 +12,66 @@ English | [**中文文档**](./README.zh-CN.md) / [**Composition API RFC**](http
1212

1313
---
1414

15-
# Navigation
15+
## Installation
1616

17-
- [Installation](#Installation)
18-
- [Usage](#Usage)
19-
- [TypeScript](#TypeScript)
20-
- [TSX](#tsx)
21-
- [Limitations](#Limitations)
22-
- [Changelog](https://github.com/vuejs/composition-api/blob/master/CHANGELOG.md)
23-
24-
# Installation
25-
26-
**npm**
17+
### NPM
2718

2819
```bash
2920
npm install @vue/composition-api
30-
```
31-
32-
**yarn**
33-
34-
```bash
21+
# or
3522
yarn add @vue/composition-api
3623
```
3724

38-
**CDN**
25+
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.
3926

40-
```html
41-
<script src="https://unpkg.com/@vue/composition-api/dist/vue-composition-api.umd.js"></script>
27+
```js
28+
import Vue from 'vue'
29+
import VueCompositionAPI from '@vue/composition-api'
30+
31+
Vue.use(VueCompositionAPI)
4232
```
4333

44-
By using the global variable `window.vueCompositionApi`
34+
```js
35+
// use the APIs
36+
import { ref, reactive } from '@vue/composition-api'
37+
```
4538

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

50-
```js
51-
import Vue from 'vue';
52-
import VueCompositionApi from '@vue/composition-api';
43+
Include `@vue/composition-api` after Vue and it will install itself automatically.
5344

54-
Vue.use(VueCompositionApi);
45+
<!--cdn-links-start-->
46+
```html
47+
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
48+
<script src="https://cdn.jsdelivr.net/npm/@vue/[email protected]"></script>
5549
```
50+
<!--cdn-links-end-->
5651

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

59-
# TypeScript
54+
```ts
55+
const { ref, reactive } = vueCompositionApi
56+
```
57+
58+
## TypeScript Support
6059

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

6564
```ts
66-
import { defineComponent } from '@vue/composition-api';
65+
import { defineComponent } from '@vue/composition-api'
6766

68-
const Component = defineComponent({
67+
export default defineComponent({
6968
// type inference enabled
70-
});
71-
72-
const Component = {
73-
// this will NOT have type inference,
74-
// because TypeScript can't tell this is options for a Vue component.
75-
};
69+
})
7670
```
7771

78-
## TSX
79-
80-
:rocket: An Example [Repository](https://github.com/liximomo/vue-composition-api-tsx-example) with TS and TSX support is provided to help you start.
81-
82-
To support TSX, create a declaration file with following content in your project.
72+
### JSX/TSX
8373

84-
```ts
85-
// file: shim-tsx.d.ts
86-
import Vue, { VNode } from 'vue';
87-
import { ComponentRenderProxy } from '@vue/composition-api';
88-
89-
declare global {
90-
namespace JSX {
91-
// tslint:disable no-empty-interface
92-
interface Element extends VNode {}
93-
// tslint:disable no-empty-interface
94-
interface ElementClass extends ComponentRenderProxy {}
95-
interface ElementAttributesProperty {
96-
$props: any; // specify the property name to use
97-
}
98-
interface IntrinsicElements {
99-
[elem: string]: any;
100-
}
101-
}
102-
}
103-
```
74+
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).
10475

10576
# Limitations
10677

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

305276
```ts
306277
import Vue from 'vue';
307-
import VueCompositionApi from '@vue/composition-api';
308-
309-
Vue.use(VueCompositionApi);
310278

311-
declare module '@vue/composition-api/dist/component/component' {
279+
declare module '@vue/composition-api' {
312280
interface SetupContext {
313281
readonly refs: { [key: string]: Vue | Element | Vue[] | Element[] };
314282
}

0 commit comments

Comments
 (0)