Tools for minimal TypeScript transpilation of Vue SFCs
Install package:
# npm npm install vue-sfc-transformer # pnpm pnpm install vue-sfc-transformerimport { parse as parseDOM } from '@vue/compiler-dom' import { parse as parseSFC } from '@vue/compiler-sfc' import { transform } from 'esbuild' import { preTranspileScriptSetup, transpileVueTemplate } from 'vue-sfc-transformer' const src = ` <template> <div v-if="test as any" /> </template> <script setup lang="ts"> defineProps<{ test?: string }>() </script> ` const transpiledTemplate = await transpileVueTemplate( src, parseDOM(src, { parseMode: 'base' }), 0, async (code) => { const res = await transform(code, { loader: 'ts', target: 'esnext' }) return res.code }, ) console.log(transpiledTemplate) // <template> // <div v-if="test" /> // </template> // // <script setup lang="ts"> // defineProps<{ // test?: string // }>() // </script> const sfc = parseSFC(transpiledTemplate, { filename: 'test.vue', ignoreEmpty: true, }) const { content: scriptBlockContents } = await preTranspileScriptSetup(sfc.descriptor, 'test.vue') console.log(scriptBlockContents) // defineProps({ // test: { // type: String, // required: false // } // })If you are using mkdist, vue-sfc-transformer exports a loader you can use:
import { vueLoader } from 'vue-sfc-transformer/mkdist'- Clone this repository
- Enable Corepack using
corepack enable - Install dependencies using
pnpm install - Run interactive tests using
pnpm dev
This package was based on the work of contributors to mkdist, and in particular this PR by @Teages: unjs/mkdist#300.
Made with ❤️
Published under MIT License.