HTML Import - Vite plugin

Vite plugin for import .html as string.

🤔 Why

Actually we can import html file as a string using:

import htmlString from './partial.html?raw'

but when running vite build the html string is not minified and we need to add ?raw to the import syntax.

So with this plugin, we just need to import html file as usual without adding ?raw:

import htmlString from './partial.html'

When running vite build the html string also minified.

If needed we also can do another thing to the html string buffer.

⚙️ Installing

npm i @ayatkyo/vite-plugin-html-import

📖 Usage

Make sure the type in the project package.json is set to module.

{
  // ...
  "type": "module",
  // ...
}

Add htmlImport into plugins in vite.config.js:

import htmlImport from '@ayatkyo/vite-plugin-html-import';

export default defineConfig({
  // ...
  plugins: [
    // ...
    htmlImport(),
  ],
});

Now we can import html file like this:

import template from './path/to/file.html';

document.body.innerHTML = template;
// or
Vue.component('some-component', {
  template: template,
  // ...
});

🎯 TODO

• [ ] Add plugin configuration
  • [ ] Allow to disable minify using minify: false
  • [ ] Allow to pass configuration into minify-html plugin

⭐️ Thanks

• Vite
• minify-html