introduction

70 notes in this subject, read out of this brain and free to use. This is page 2 of 2.

Enable compilerOptions.strict for Options API type checking

If you are using Options API, you need to set compilerOptions.strict to true (or at least enable compilerOptions.noImplicitThis, which is a part of the strict flag) to leverage type checking of 'this' in component options. Otherwise 'this' will be treated as 'any'.

Configure compilerOptions.paths for resolver aliases

If you have configured resolver aliases in your build tool, for example the @/* alias configured by default in a create-vue project, you need to also configure it for TypeScript via compilerOptions.paths.

Configure compilerOptions.jsx and jsxImportSource for TSX

If you intend to use TSX with Vue, set compilerOptions.jsx to 'preserve' and set compilerOptions.jsxImportSource to 'vue'.

ts-loader problems in webpack-based setups

In webpack-based setups such as Vue CLI, it is common to perform type checking as part of the module transform pipeline using ts-loader. This is not a clean solution because the type system needs knowledge of the entire module graph to perform type checks. Individual module transform steps are not the right place for the task. ts-loader can only type check post-transform code, which doesn't align with errors seen in IDEs or from vue-tsc that map directly back to source code. Type checking can be slow when performed in the same thread or process with code transformations, significantly affecting build speed. Type checking already runs in the IDE in a separate process, so the cost of dev experience slowdown is not a good trade-off.

Migrate from Vue CLI to Vite for TypeScript

If you are currently using Vue 3 with TypeScript via Vue CLI, it is strongly recommended to migrate over to Vite. Work is also being done on CLI options to enable transpile-only TypeScript support so you can switch to vue-tsc for type checking.

Vue SFC Playground features

The Vue SFC Playground is deployed from the latest commit and is designed for inspecting component compilation results. It is available at https://play.vuejs.org.

Vue + Vite on StackBlitz IDE environment

Vue + Vite on StackBlitz provides an IDE-like environment running an actual Vite dev server in the browser, and is the closest to a local setup. It is available at https://vite.new/vue.

Online playgrounds for bug reproductions

It is recommended to use online playgrounds like the Vue SFC Playground or Vue + Vite on StackBlitz to provide reproductions when reporting bugs.

petite-vue for no-build-step usage

For a lighter-weight alternative for no-build-step usage, petite-vue is available at https://github.com/vuejs/petite-vue.

Other Vue online playgrounds

Additional online playgrounds for Vue include: VueUse Playground (https://play.vueuse.org), Vue + Vite on Repl.it (https://replit.com/@templates/VueJS-with-Vite), Vue on CodeSandbox (https://codesandbox.io/p/devbox/github/codesandbox/sandbox-templates/tree/main/vue-vite), Vue on Codepen (https://codepen.io/pen/editor/vue), and Vue on WebComponents.dev (https://webcomponents.dev/create/cevue).

Give your agent this brain