bun-plugin-vue3

bun-plugin-vue3

A Bun plugin for Vue 3 Single File Components.

Installation

bun add -D bun-plugin-vue3

Dev Server Usage

bun-plugin-vue3 integrates with Bun's Fullstack Dev Server, giving you HMR when developing your Vue app.

Start by registering it in your bunfig.toml:

[serve.static]
plugins = ["bun-plugin-vue3"]

Then start your dev server:

bun index.html

Bundler Usage

bun-plugin-vue3 lets you bundle Vue components with Bun.build.

// build.ts
// to use: bun build.ts
import { pluginVue3 } from 'bun-plugin-vue3'

await Bun.build({
  entrypoints: ['./index.html'],
  outdir: './dist',
  plugins: [
    pluginVue3({
      isProduction: true, // Enable for production builds
    }),
  ],
})

Testing

bun-plugin-vue3 can be used to import .vue components in bun test. Register it as a preload in bunfig.toml:

[test]
preload = ["bun-plugin-vue3"]

Then import your components directly in tests:

import { test, expect } from 'bun:test'
import MyComponent from './MyComponent.vue'

test('component has a render function', () => {
  expect(typeof MyComponent.render).toBe('function')
})

Development

Setup

git clone https://github.com/jh0rman/bun-plugin-vue.git
cd bun-plugin-vue
bun install

Running tests

bun test

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.