Tools for minimal TypeScript transpilation of Vue SFCs
npm install vue-sfc-transformer[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Github Actions][github-actions-src]][github-actions-href]
[![Codecov][codecov-src]][codecov-href]
> Tools for minimal TypeScript transpilation of Vue SFCs
Install package:
``shnpm
npm install vue-sfc-transformer vue @vue/compiler-core esbuild
js
import { parse as parseSFC } from '@vue/compiler-sfc'
import { transform } from 'esbuild'import { preTranspileScriptSetup, transpileVueTemplate } from 'vue-sfc-transformer'
const src =
const sfc = parseSFC(src, {
filename: 'test.vue',
ignoreEmpty: true,
})
// transpile template block
const templateBlockContents = await transpileVueTemplate(
sfc.descriptor.template.content,
sfc.descriptor.template.ast,
sfc.descriptor.template.loc.start.offset,
async (code) => {
const res = await transform(code, { loader: 'ts', target: 'esnext' })
return res.code
},
)
console.log(templateBlockContents)
//
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:
`ts`
import { vueLoader } from 'vue-sfc-transformer/mkdist'
> mkdist will automatically use the loader from vue-sfc-transformer when you pass vue to the loaders option and have this package installed.
- Clone this repository
- Enable Corepack using corepack enable
- Install dependencies using
- Run interactive tests using
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.
[npm-version-src]: https://img.shields.io/npm/v/vue-sfc-transformer?style=flat-square
[npm-version-href]: https://npmjs.com/package/vue-sfc-transformer
[npm-downloads-src]: https://img.shields.io/npm/dm/vue-sfc-transformer?style=flat-square
[npm-downloads-href]: https://npm.chart.dev/vue-sfc-transformer
[github-actions-src]: https://img.shields.io/github/actions/workflow/status/nuxt-contrvue-sfc-transformerransformer/ci.yml?branch=main&style=flat-square
[github-actions-href]: https://github.com/nuxt-contrvue-sfc-transformerransformer/actions?query=workflow%3Aci
[codecov-src]: https://img.shields.io/codecov/c/gh/nuxt-contrvue-sfc-transformerransformer/main?style=flat-square
[codecov-href]: https://codecov.io/gh/nuxt-contrvue-sfc-transformerransformer