vue-tsx.macro
Make TSX (JSX for Typescript) work for Vue 2.
HOW to use with vue-cli?
SUGGESTION: Try vue-cli-plugin-tsx to simplify the steps!
-
#### Use
vue-cli
to create a project with typescript and jsx support -
#### NOT COMPATIBLE with
@vue/cli-plugin-typescript
.yarn remove @vue/cli-plugin-typescript -
#### Install
babel-plugin-macros
andvue-tsx.macro
yarn add -D babel-plugin-macros vue-tsx.macro -
#### Setup webpack to resolve
.ts / .tsx
through babel with typescript preset and macros plugin.Here is an example to config webpack through
vue-cli
plugin.// modified from @vue/cli-plugin-typescriptconst path =module {const useThreads = processenvNODE_ENV === 'production' && optionsparallelapi}And update
package.json
to let@vue/cli-service
know this plugin:name: "..."..."vuePlugins":"service":"configs/cli-typescript-plugin.js"Then add
@babel/preset-app
andbabel-plugin-macros
to babel config, e.g.:// babel.config.jsmoduleexports =presets: '@vue/app' '@babel/typescript'plugins: 'macros'At last update
tsconfig.json
to disable emitting files, e.g.: -
#### All setups are done. We can write TSX for
vue
with ALMOST ALLtypescript
benefits now.import LogoAsset from '@/assets/logo.png'import component type as t EVENTS SLOTS from 'vue-tsx.macro'import HelloWorld from '@/components/HelloWorld.vue'const Component =const Home =