Vetur Vue 3

Posted on  by admin

Install Sass(opens new window) for sass syntax highlighting.

Install language-stylus(opens new window) for stylus syntax highlighting.

Install ESLint extension(opens new window) for linting vue and js files.

Add vue to your eslint.validate setting, for example:. package.json must exist in the project root, Vetur uses it to determine the installed Vue version.

# Typescript

  • Next, create a jsconfig.json or tsconfig.json, which will include all Vue files and files that they import from, for example:.
  • Use tsconfig.json for a pure TS project. Use jsconfig.json for a pure JS project. Use both with allowJs: true for a mixed JS / TS project.
  • If you are using Webpack's alias(opens new window) or TypeScript's path mapping(opens new window) to resolve components, you need to update Vetur's tsconfig.json or jsconfig.json.
  • You need to add a shim type file to import a Vue SFC in a TypeScript file.

# Yarn PnP

  • If you use a monorepo, VTI or package.json and tsconfig.json/jsconfig.json does not exist at project root, you can use vetur.config.js for advanced settings.
  • Please add vetur.config.js at project root or monorepo project root. Read more vetur.config.js reference.
  • Read RFC(opens new window). Vetur supports this feature now, but it has some limits.
  • Don't mix common project and pnp project in multi-root/monorepo.

Volar

Prettier doesn't support Yarn PnP, so we can't load plugin automatically.

Vue VSCode Snippets

If you're using the editor SDKs (Yarn Editor SDKs(opens new window)) with typescript and you want to use the typescript server wrapper created by yarn you'll need to set the typescript.tsdk to the directory of the editor sdk's tsserver:.