Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(docs): extend vue 2 info regarding types #750

Merged
merged 3 commits into from
Mar 6, 2022
Merged

fix(docs): extend vue 2 info regarding types #750

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2b02064
fix(docs): extend vue 2 info regarding types
rchl Nov 30, 2021
3921b27
Merge branch 'master' into fix/vue-2-info
rchl Mar 5, 2022
a49a153
update instructions as suggested
rchl Mar 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
33 changes: 23 additions & 10 deletions extensions/vscode-vue-language-features/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,9 @@ This company is [sponsoring this project](https://github.com/sponsors/johnsoncod

1. Add `@vue/runtime-dom`

This extension required Vue 3 types from the `@vue/runtime-dom`.
This extension requires Vue 3 types from the `@vue/runtime-dom`.

Vue 3 in itself includes the package `@vue/runtime-dom`. For Vue 2 you will have to install this package yourself:
Vue 3 itself includes the `@vue/runtime-dom` package. For Vue 2 you will have to install it yourself:

```jsonc
// package.json
Expand All @@ -45,17 +45,30 @@ Vue 3 in itself includes the package `@vue/runtime-dom`. For Vue 2 you will have

2. Remove `Vue.extend`

Template type-checking do not support with `Vue.extend`, you can use [composition-api](https://github.com/vuejs/composition-api), [vue-class-component](https://github.com/vuejs/vue-class-component), or instead of `export default Vue.extend`.
Template type-checking is not supported with `Vue.extend`. You can use [composition-api](https://github.com/vuejs/composition-api), [vue-class-component](https://github.com/vuejs/vue-class-component), or `export default { ... }` instead of `export default Vue.extend`.

3. Support Vue 2 template
Here is a compatibility table for different ways of writing the script blocks:

Volar preferentially supports Vue 3. Vue 3 and Vue 2 template has some different. You need to set the `experimentalCompatMode` option to support Vue 2 template.
| | Component options type-checking in `<script>` | Interpolation type-checking in `<template>` | Cross-component props type-checking |
|:-----------------------------------------|:----------------------------------------------|:--------------------------------------------|:------------------------------------|
| `export default { ... }` with JS | Not supported | Not supported | Not supported |
| `export default { ... }` with TS | Not supported | Supported but deprecated | Supported but deprecated |
| `export default Vue.extend({ ... })` with JS | Not supported | Not supported | Not supported |
| `export default Vue.extend({ ... })` with TS | Limited (supports `data` types but not `props` types) | Limited | Not supported |
| `export default defineComponent({ ... })` | Supported | Supported | Supported |
| Class component | Supported | Supported with additional code ([#21](https://github.com/johnsoncodehk/volar/issues/21)) | Supported with additional code |

Note that you can use `defineComponent` even for components that are using the `Options API`.

3. Support for Vue 2 template

Volar preferentially supports Vue 3. Vue 3 and Vue 2 templates have some differences. You need to set the `experimentalCompatMode` option to support the Vue 2 templates.

```jsonc
// tsconfig.json
{
"compilerOptions": {
...
// ...
},
"vueCompilerOptions": {
"experimentalCompatMode": 2,
Expand All @@ -65,11 +78,11 @@ Volar preferentially supports Vue 3. Vue 3 and Vue 2 template has some different
}
}
```

4. remove `.d.ts` files if it exists.

For projects generated by the [Vue CLI](https://cli.vuejs.org/), `.d.ts` files are included. remove these files.

4. remove `.d.ts` files if they exist.

For projects generated by the [Vue CLI](https://cli.vuejs.org/), `.d.ts` files are included. Remove these files.

```
rm src/shims-tsx.d.ts src/shims-vue.d.ts
```
Expand Down