A lib to compile Vue Single-File Component into plain JavaScript & CSS.
npm install vue-simple-compiler # or yarn add vue-simple-compiler # or pnpm install vue-simple-compiler// Main API export const compile = (source: string, options?: CompilerOptions) => CompileResult; // Options type FileResolver = (filename: string) => string; type CompilerOptions = { // COMMON OPTIONS: // the root directory of the source code // - by default, it's `@anonymous` root?: string; // the filename of the source code // - by default, it's `anonymous.vue` filename?: string; // ADVANCED OPTIONS: // custom file resolver // - by default, it's `(x) => x` resolver?: FileResolver; // whether to add CSS imports into JavaScript code autoImportCss?: boolean; // whether to resolve imports in `<script>` like: // - `*.ts` into `*.js` // - `*.vue` into `*.vue.js` autoResolveImports?: boolean; // whether to compile the code for production|development mode isProd?: boolean; // whether to generate source map hmr?: boolean; // TYPESCRIPT OPTIONS: tsCompilerOptions?: CompilerOptions from 'typescript'; tsRuntime?: typeof typescript; tsTransform?: ( src: string, options?: CompilerOptions from 'typescript', runtime?: typeof typescript ) => { code: string, sourceMap?: RawSourceMap | undefined }; // DANGEROUS SFC OPTIONS: sfcScriptCompilerOptions?: Partial<SFCScriptCompileOptions from 'vue/compiler-sfc'>; sfcTemplateCompilerOptions?: Partial<SFCTemplateCompileOptions from 'vue/compiler-sfc'>; }; // Output type CompileResultFile = { filename: string; code: string; sourceMap?: RawSourceMap | undefined; }; type CompileResultExternalFile = { filename: string; query: Record<string, string>; } type CompileResult = { js: CompileResultFile; css: CompileResultFile[]; externalJs: CompileResultExternalFile[]; externalCss: CompileResultExternalFile[]; errors: Error[]; };- The default
filenameoption isanonymous.vue. - The default
resolveroption is(x) => x.
- The output usually has:
- one and only one JS file (including filepath, content, and source map),
- a list of CSS files (including filepath, content, and source map),
- a list of external JS files (only filepath), and
- a list of external CSS files (only filepath).
- The list of CSS files is possibly empty if there is no CSS code parsed and generated.
- The filename of JS file is usually
*.vue.js. - The filename of CSS file is usually
*.vue__<index>.css. - The ES imports of CSS files will has query parameters.
scopedandidare used for scoped CSS.moduleis used for CSS Modules.lang.<lang>orlang.module.<lang>at the end. e.g.lang.scss,lang.module.less, etc.
- ✅ Support Vue Single-File Component (SFC) syntax.
- For
<script>- ✅ Support TypeScript.
- ✅ Support
<script setup>.
- For
<style>- ✅ Support CSS Modules.
- ✅ Support
<style scoped>. - ✅ Support Sass/SCSS/Less.
- For output format
- ✅ Support custom file resolver.
- ✅ Support whether to add CSS imports into JavaScript code.
- ✅ Support generating source map.
- ✅ Support imported scripts and styles (
srcattributes in<script>and<style>).- ❎ Not support imported setup scripts or templates (
srcattributes in<script setup>or<template>).
- ❎ Not support imported setup scripts or templates (
import { compile } from 'vue-simple-compiler'; const code = ` <script> import { ref } from 'vue' export default { setup() { const msg = ref('Hello World!') return { msg } } } </script> <template> <h1>{{ msg }}</h1> <input v-model="msg"> </template> <style> h1 { color: red } </style> ` const { js, css, // externalJs, // externalCss, // errors } = compile(code, { filename: 'foo.vue', autoImportCss: true, autoResolveImports: true, isProd: true }); js.filename; // `foo.vue.js` js.code; // JavaScript code js.sourceMap; // Source map of JavaScript code css[0].filename; // `foo.vue__0.css` css[0].code; // CSS code css[0].sourceMap; // Source map of CSS code