unplugin-embed

A plugin that embeds any file as a base64 string into the source code.

Install

npm i -D unplugin-embed
yarn add  -D unplugin-embed
pnpm add -D unplugin-embed

Configuration

Vite

// vite.config.ts
import Embed from 'unplugin-embed/vite'

export default defineConfig({
  plugins: [
    Embed(),
  ],
})

Rollup

// rollup.config.js
import Embed from 'unplugin-embed/rollup'

export default {
  plugins: [
    Embed(),
  ],
}

Webpack

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-embed/webpack').default(),
  ],
}

Rspack

// rspack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-embed/rspack').default(),
  ],
}

webpack

// vue.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-embed/webpack').default(),
  ],
}

You can also rename the Vue configuration file to vue.config.mjs and use static import syntax (you should use latest @vue/cli-service ^5.0.8):

// vue.config.mjs
import Embed from 'unplugin-embed/webpack'

export default {
  configureWebpack: {
    plugins: [
      Embed(),
    ],
  },
}

esbuild

// esbuild.config.js
import { build } from 'esbuild'
import Embed from 'unplugin-embed/esbuild'

build({
  /* ... */
  plugins: [
    Embed({
      /* options */
    }),
  ],
})

astro

// astro.config.mjs
import AutoImport from 'unplugin-auto-import/astro'

export default defineConfig({
  integrations: [
    AutoImport({
      /* options */
    })
  ],
})

Usage

use ?embed to embed the file as a base64 string

import fontData from './font.ttf?embed'
// fontData is a base64 string

use options={filter:(id)=>id.endsWith('.ttf')} to filter the files to embed

// vite.config.ts

// src/index.ts
import fontData from './font.ttf'

export default defineConfig({
  plugins: [
    Embed({
      filter: (id: string) => id.endsWith('.ttf')
    }),
  ],
})
// fontData is a base64 string