esbuild-plugin-vue3-inline
TypeScript icon, indicating that this package has built-in type declarations

0.3.2 • Public • Published

esbuild-plugin-vue3

npm version

esbuild plugin for resolving and loading Vue.js 3 SFCs. This plugin is meant to mimick the default Vue CLI behaviour, for example it supports path aliases defined in the tsconfig.json file.

Install:

npm i -D esbuild-plugin-vue3

Supported

  • HTML and Pug <template>
  • JavaScript and TypeScript <script> and <script setup> (the latter is still experimental)
  • CSS, SCSS and SASS <style>
  • Path aliases from tsconfig.json, e.g. import "@/Component.vue" resolves to import "../../Component.vue
  • Emit HTML file and inject output CSS and JS files

Usage

Simple usage, this will resolve all .vue imports and load its parts independently. By default path aliases will be loaded from the tsconfig.json file, if any.

const vuePlugin = require("esbuild-plugin-vue3")

esbuild.build({
    entryPoints: ["src/app.ts"],
    bundle: true,
    outfile: "dist/app.js",
    plugins: [vuePlugin()]
})

More advanced usage, generating HTML file:

const vuePlugin = require("esbuild-plugin-vue3")

esbuild.build({
    entryPoints: ["src/app.ts"],
    bundle: true,
    outfile: "dist/app.js",
    entryNames: '[dir]/[name]-[hash]',
    metafile: true,
    plugins: [vuePlugin({
        generateHTML: "src/index.html"
        // Or:
        generateHTML: {
            sourceFile: "src/index.html",
            pathPrefix: "assets/",
            preload: [{ href: "https://example.com/my-external.css", as: "stylesheet" }]
        }
    })]
})

The library is still not thoroughly tested, use at your own risk.

Package Sidebar

Install

npm i esbuild-plugin-vue3-inline

Weekly Downloads

1

Version

0.3.2

License

MIT

Unpacked Size

62.4 kB

Total Files

15

Last publish

Collaborators

  • danieletulonejs