# vite-plugin-html-template

> html template for vite

Latest version **1.2.2** (published 2023-10-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-plugin-html-template
pnpm add vite-plugin-html-template
yarn add vite-plugin-html-template
bun add vite-plugin-html-template
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2023-10-22 |
| First published | 2021-04-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 221.4 KB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 121 |
| Author | indexxuan@gmail.com |
| Maintainers | indexxuan |
| Keywords | vite-plugin, html, html-template, virtual-html |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-html-template
- Repository: https://github.com/IndexXuan/vite-plugin-html-template
- Issues: https://github.com/IndexXuan/vite-plugin-html-template/issues
- npm.io page: https://npm.io/package/vite-plugin-html-template

## Dependencies (1)

- [shelljs](https://npm.io/package/shelljs.md) 0.8.4

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.2.2 (latest) — 2023-10-22
- 1.2.1 — 2023-10-07
- 1.2.0 — 2023-06-06
- 1.1.5 — 2022-06-07
- 1.1.4 — 2022-05-24
- 1.1.3 — 2022-05-16
- 1.1.2 — 2022-02-23
- 1.1.1 — 2022-02-21
- 1.1.1-dev.0 — 2022-02-21
- 1.1.0 — 2021-12-14
- 1.0.6 — 2021-10-12
- 1.0.5 — 2021-09-27
- 1.0.4 — 2021-05-27
- 1.0.3 — 2021-05-27
- 1.0.2 — 2021-05-20
- … 6 more at https://npm.io/package/vite-plugin-html-template/versions

## README

# vite-plugin-html-template

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

> It works perfectly together with [vite-plugin-mpa](https://github.com/IndexXuan/vite-plugin-mpa).

<p align="center">
  <img alt="wakatime" src="https://wakatime.com/badge/github/IndexXuan/vite-plugin-html-template.svg" />
  <a href="https://github.com/IndexXuan/vite-plugin-html-template/actions/workflows/npm-publish.yml">
   <img alt="NPM Publish" src="https://github.com/IndexXuan/vite-plugin-html-template/actions/workflows/npm-publish.yml/badge.svg" style="max-width:100%;">
  </a>
  <a href="https://www.npmjs.com/package/vite-plugin-html-template" rel="nofollow">
    <img alt="downloads" src="https://img.shields.io/npm/dt/vite-plugin-html-template.svg">
  </a>
  <a href="https://www.npmjs.com/package/vite-plugin-html-template" rel="nofollow">
    <img alt="npm version" src="https://img.shields.io/npm/v/vite-plugin-html-template.svg" style="max-width:100%;">
  </a>
  <a href="https://github.com/IndexXuan/vite-plugin-html-template/blob/main/LICENSE">
    <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" style="max-width:100%;">
  </a>
</p>

## 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

```sh
yarn add -D vite-plugin-html-template
```

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

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

## Options

- like [vue-cli#pages](https://cli.vuejs.org/config/#pages)
```ts
// 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',
  },
}
```

- [see more](https://github.com/IndexXuan/vite-plugin-html-template/blob/main/src/lib/options.ts)


## Underlying
- Thanks to [vite-plugin-virtual-html](https://github.com/Windson1806/vite-plugin-virtual-html)
- Thanks to [vite-plugin-vue-cli](https://github.com/IndexXuan/vite-plugin-vue-cli/blob/main/src/index.ts#L165)


## Further
- [vue-cli-plugin-vite](https://github.com/IndexXuan/vue-cli-plugin-vite)
- [vite-plugin-mpa](https://github.com/IndexXuan/vite-plugin-mpa)

---
_Source: https://npm.io/package/vite-plugin-html-template · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._