vite-plugin-html-template

html template for vite

Usage no npm install needed!

<script type="module">
  import vitePluginHtmlTemplate from 'https://cdn.skypack.dev/vite-plugin-html-template';
</script>

README

vite-plugin-html-template

HTML template for vite app, like html-webpack-plugin for webpack.

It works perfectly together with vite-plugin-mpa.

wakatime NPM Publish downloads npm version License: MIT

Motivation

  • Vite needs an html entry file, which means we must have
    • projectRoot/index.html for SPA
    • projectRoot/src/pages/*/index.html for MPA
  • Why not use html template for all entries
  • Also we should support ejs/lodash.template syntax for the html content, like setting <title></title>.

Usage

yarn add -D vite-plugin-html-template

// vite.config.ts
import htmlTemplate from 'vite-plugin-html-template'

// @see https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // ...other plugins
    htmlTemplate(/* options */),
  ],
})

Options

// for SPA, there is nothing to do, just use `public/index.html` as template

// for MPA, customise the template path (default is `public/index.html`) and page title:
{
  // where is the pages' root directory?
  pagesDir: 'src/pages',
  // define pages like it is done in vue-cli
  pages: {
    index: {
      template: './public/index.html',
      title: 'Homepage',
    },
    subpage: {
      template: './src/pages/subpage/index.html',
      title: 'Subpage',
    },
  },
  // expose to template
  data: {
    title: 'Homepage',
  },
}

Underlying

Further