0.1.2 • Published 1 year ago
@ayatkyo/vite-plugin-html-import v0.1.2
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
- Allow to disable minify using