@@ -12,95 +12,66 @@ English | [**中文文档**](./README.zh-CN.md) / [**Composition API RFC**](http
12
12
13
13
---
14
14
15
- # Navigation
15
+ ## Installation
16
16
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
27
18
28
19
``` bash
29
20
npm install @vue/composition-api
30
- ```
31
-
32
- ** yarn**
33
-
34
- ``` bash
21
+ # or
35
22
yarn add @vue/composition-api
36
23
```
37
24
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.
39
26
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)
42
32
```
43
33
44
- By using the global variable ` window.vueCompositionApi `
34
+ ``` js
35
+ // use the APIs
36
+ import { ref , reactive } from ' @vue/composition-api'
37
+ ```
45
38
46
- # Usage
39
+ > : bulb : When you migrate to Vue 3, just replacing ` @vue/composition-api ` to ` vue ` and your code should just work.
47
40
48
- You must install ` @vue/composition-api ` via ` Vue.use() ` before using other APIs:
41
+ ### CDN
49
42
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.
53
44
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 >
55
49
```
50
+ <!-- cdn-links-end-->
56
51
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 ` .
58
53
59
- # TypeScript
54
+ ``` ts
55
+ const { ref, reactive } = vueCompositionApi
56
+ ```
57
+
58
+ ## TypeScript Support
60
59
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
62
61
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 `
64
63
65
64
``` ts
66
- import { defineComponent } from ' @vue/composition-api' ;
65
+ import { defineComponent } from ' @vue/composition-api'
67
66
68
- const Component = defineComponent ({
67
+ export default defineComponent ({
69
68
// 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
+ })
76
70
```
77
71
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
83
73
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 ) .
104
75
105
76
# Limitations
106
77
@@ -304,11 +275,8 @@ You may also need to augment the `SetupContext` when working with TypeScript:
304
275
305
276
``` ts
306
277
import Vue from ' vue' ;
307
- import VueCompositionApi from ' @vue/composition-api' ;
308
-
309
- Vue .use (VueCompositionApi );
310
278
311
- declare module ' @vue/composition-api/dist/component/component ' {
279
+ declare module ' @vue/composition-api' {
312
280
interface SetupContext {
313
281
readonly refs: { [key : string ]: Vue | Element | Vue [] | Element [] };
314
282
}
0 commit comments