https://github.com/IndexXuan/vite-plugin-html-template

html template for vite, like html-webpack-plugin for webpack.
https://github.com/IndexXuan/vite-plugin-html-template

vite vite-plugin

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/IndexXuan/vite-plugin-html-template
• Owner: IndexXuan
• Created: 2021-04-07T07:52:19.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-10-22T06:42:34.000Z (7 months ago)
• Last Synced: 2024-03-25T11:22:05.907Z (about 2 months ago)
• Topics: vite, vite-plugin
• Language: TypeScript
• Homepage:
• Size: 113 KB
• Stars: 118
• Watchers: 3
• Forks: 20
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Lists

• awesome-vite - vite-plugin-html-template - HTML template, like `html-webpack-plugin` for Webpack. (Plugins / Framework-agnostic Plugins)
• awesome-vite - vite-plugin-html-template - HTML template, like `html-webpack-plugin` for Webpack. (Plugins / Framework-agnostic Plugins)
• awesome-vite - vite-plugin-html-template - HTML template, like `html-webpack-plugin` for Webpack. (Plugins / Framework-agnostic Plugins)
• awesome-viter - vite-plugin-html-template - HTML template, like `html-webpack-plugin` for Webpack. (Plugins / Framework-agnostic Plugins)
• awesome-vite - vite-plugin-html-template - HTML template, like `html-webpack-plugin` for Webpack. (Plugins / Framework-agnostic Plugins)
• awesome-vite - vite-plugin-html-template - HTML template, like `html-webpack-plugin` for Webpack. (Plugins / Framework-agnostic Plugins)
• awesome-vite - vite-plugin-html-template - HTML template, like `html-webpack-plugin` for Webpack. (Plugins / Framework-agnostic Plugins)

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



  

  

   

  

  

    

  

  

    

  

  

    

  



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

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