Skip to content

Commit f48a977

Browse files
author
Ronnie Villarini
committed
add vue-3 link
1 parent 6966118 commit f48a977

File tree

1 file changed

+33
-29
lines changed

1 file changed

+33
-29
lines changed

README.md

+33-29
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
Cheatsheets for experienced Vue developers getting started with TypeScript
44

5+
- [Vue 3 specifics](vue-3.md)
6+
57
# Section 1: Setup
68

79
## Prerequisites
@@ -11,53 +13,54 @@ Cheatsheets for experienced Vue developers getting started with TypeScript
1113

1214
## Vue + TypeScript Starter Kits
1315

14-
1. Using the [Vue CLI](https://vuejs.org/v2/guide/installation.html#CLI) , you can select the [TypeScript plugin](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript) to be setup in a new a Vue project.
16+
1. Using the [Vue CLI](https://vuejs.org/v2/guide/installation.html#CLI) , you can select the [TypeScript plugin](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript) to be setup in a new a Vue project.
1517

16-
```bash
17-
# 1. Install Vue CLI, if it's not already installed
18-
npm install --global @vue/cli
18+
```bash
19+
# 1. Install Vue CLI, if it's not already installed
20+
npm install --global @vue/cli
1921

20-
# 2. Create a new project, then choose the "Manually select features" option
21-
vue create <my-project-name>
22-
```
22+
# 2. Create a new project, then choose the "Manually select features" option
23+
vue create <my-project-name>
24+
```
2325

2426
2. [Vite](https://github.com/vitejs/vite) is a new build tool by Evan You. It currently only works with Vue 3.x but supports TypeScript out-of-the-box.
2527

26-
> ⚠ Currently in beta. Do not use in production.
28+
> ⚠ Currently in beta. Do not use in production.
2729
28-
```bash
29-
npm init vite-app <project-name>
30-
cd <project-name>
31-
npm install
32-
npm run dev
33-
```
30+
```bash
31+
npm init vite-app <project-name>
32+
cd <project-name>
33+
npm install
34+
npm run dev
35+
```
3436

3537
# Section 2: Getting Started
3638

3739
## Recommended `ts.config` setup
3840

39-
>note: `strict:true` stricter inference for data properties on `this`. If you do not use it, `this` will always be treated as `any`
41+
> note: `strict:true` stricter inference for data properties on `this`. If you do not use it, `this` will always be treated as `any`
42+
4043
```json
4144
// tsconfig.json
4245
{
43-
"compilerOptions": {
44-
"target": "esnext",
45-
"module": "esnext",
46-
"strict": true,
47-
"moduleResolution": "node"
48-
}
46+
"compilerOptions": {
47+
"target": "esnext",
48+
"module": "esnext",
49+
"strict": true,
50+
"moduleResolution": "node"
51+
}
4952
}
5053
```
5154

5255
## Usage in `.vue` files
56+
5357
Add `lang="ts"` to the script tag to declare TS as the `lang` used.
58+
5459
```js
55-
<script lang="ts">
56-
...
57-
</script>
60+
<script lang='ts'>...</script>
5861
```
5962

60-
In Vue 2.x you need to define components with `Vue.component` or `Vue.extend`:
63+
In Vue 2.x you need to define components with `Vue.component` or `Vue.extend`:
6164

6265
```js
6366
<script lang="ts">
@@ -77,12 +80,13 @@ export default Vue.extend({
7780
In Vue 3.x you can use `defineComponent` to get type inference in Vue component options
7881

7982
```js
80-
import { defineComponent } from 'vue'
83+
import { defineComponent } from 'vue';
8184

8285
const Component = defineComponent({
83-
// type inference enabled
84-
})
86+
// type inference enabled
87+
});
8588
```
8689

8790
# Other Vue + TypeScript resources
88-
- Views on Vue podcast - https://devchat.tv/views-on-vue/vov-076-typescript-tell-all-with-jack-koppa/
91+
92+
- Views on Vue podcast - https://devchat.tv/views-on-vue/vov-076-typescript-tell-all-with-jack-koppa/

0 commit comments

Comments
 (0)