esbuild-plugin-vue3
v0.4.2
Published
[![npm version](https://badge.fury.io/js/esbuild-plugin-vue3.svg)](https://badge.fury.io/js/esbuild-plugin-vue3)
Downloads
57,664
Readme
esbuild-plugin-vue3
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 toimport "../../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 esbuild = require("esbuild")
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 esbuild = require("esbuild")
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" }]
}
})]
})