vite-plugin-html-template

KO | EN

gitlite — search

#javascript #python #hacktoberfest #golang #go #android #rust #linux #docker #java #windows #awesome-list #security #pytorch

vite-plugin-html-template

(★ 121)

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

File Explorer

Download Latest Version (.zip)

- - npm-publish.yml
- - package.json
  - README.md
  - tsconfig.json
  - vite.config.ts
- - package.json
  - README.md
  - tsconfig.json
  - vite.config.ts
- - .gitignore
  - package.json
  - README.md
  - tsconfig.json
  - vite.config.ts
- - options.ts
  - utils.ts
- index.ts
.commitlintrc.js
.cz-configrc.js
.gitignore
.npmignore
package.json
README.md
tsconfig.json
yarn.lock

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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

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

vite-plugin-html-template

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

vite-plugin-html-template

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README