Skip to content

Latest commit

 

History

History
110 lines (78 loc) · 4.58 KB

installation.md

File metadata and controls

110 lines (78 loc) · 4.58 KB
Raw

Installation

:::warning Dont forget to deactivate Vetur else Volar will not work properly! :::

Vue 3

The easiest way to install Volar is to install the extension within in your VSCode Editor. https://marketplace.visualstudio.com/items?itemName=Vue.volar

CSS highlighting

Recommended css languages are css / less /scss. If you are using postcss / stylus / sass you need to install additional extensions for syntax highlighting.

ESLint / Prettier support

Volar does not include ESLint and Prettier, but the official ESLint and Prettier extensions support Vue, so you could install these yourself if needed.

Vue 2

Install @vue/runtime-dom

:::warning Optional If your Vue version is >=2.7 @vue/runtime-dom is already included :::

  $ npm install -D @vue/runtime-dom
  $ yarn add -D @vue/runtime-dom
  $ pnpm install -D @vue/runtime-dom

Remove Vue.extend from your components

Template type-checking is not supported with Vue.extend. You can use composition-api, vue-class-component, or export default { ... } instead of export default Vue.extend.

Here is a compatibility table for different ways of writing the script blocks:

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) Supported with additional code

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

Edit tsconfig.json

In order to support Vue 2 templates you need to edit your tsconfig.json file

{
  "compilerOptions": {
    "jsx": "preserve",
    // ...
  },
  "vueCompilerOptions": {
    "target": 2, // For Vue version <= 2.6.14
  }
}

:::warning If you are using Vue 2.7 set target to "target": 2.7 :::

Remove .d.ts files

Projects created by the Vue CLI will have files .d.ts files like:

  • shims-tsx.d.ts
  • shims-vue.d.ts

Remove these files as they are no longer needed.

Editor support

Support for other editors is available under following links:

Next Steps

Having problems?

Check out the Troubleshooting page

Additional features?

Check out additional Volar Features