https://github.com/JiangWeixian/vite-plugin-document

use Document.tsx as html template
https://github.com/JiangWeixian/vite-plugin-document

html html-template vite vite-plugin

Last synced: 2 months ago
JSON representation

use Document.tsx as html template

• Host: GitHub
• URL: https://github.com/JiangWeixian/vite-plugin-document
• Owner: JiangWeixian
• License: mit
• Created: 2022-09-01T14:29:59.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2023-06-18T03:34:24.000Z (about 1 year ago)
• Last Synced: 2024-03-27T05:21:53.828Z (3 months ago)
• Topics: html, html-template, vite, vite-plugin
• Language: TypeScript
• Homepage:
• Size: 144 KB
• Stars: 9
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Lists

• awesome-vite - vite-plugin-document - Use `Document.tsx` as html template. (Plugins / Framework-agnostic Plugins)
• awesome-vite - vite-plugin-document - Use `Document.tsx` as html template. (Plugins / Framework-agnostic Plugins)
• awesome-vite - vite-plugin-document - Use `Document.tsx` as html template. (Plugins / Framework-agnostic Plugins)
• awesome-viter - vite-plugin-document - Use `Document.tsx` as html template. (Plugins / Framework-agnostic Plugins)
• awesome-vite - vite-plugin-document - Use `Document.tsx` as html template. (Plugins / Framework-agnostic Plugins)
• awesome-vite - vite-plugin-document - Use `Document.tsx` as html template. (Plugins / Framework-agnostic Plugins)
• awesome-vite - vite-plugin-document - Use `Document.tsx` as html template. (Plugins / Framework-agnostic Plugins)

README

        
![vite-plugin-document](https://realme-ten.vercel.app/api/v1/banner?colorA=7c2d12&colorB=c2410c&textColor=fb923c&title=vite-plugin-document&subtitle=JiangWeixian&desc=Document.tsx%20as%20html%20template)

[![npm](https://img.shields.io/npm/v/vite-plugin-document)](https://github.com/JiangWeixian/vite-plugin-document) [![GitHub](https://img.shields.io/npm/l/vite-plugin-document)](https://github.com/JiangWeixian/vite-plugin-document) 

*use `Document.tsx` as html template.*

## install

```console

pnpm i vite-plugin-document -D

```

## usage

```tsx

import { defineConfig } from 'vite'

import react from '@vitejs/plugin-react'

import document from 'vite-plugin-document'

// https://vitejs.dev/config/

export default defineConfig({

  plugins: [react(), document()],

})

```

create `src/Document.tsx` file, add follow code

```tsx

import React from 'react'

const Document = () => {

  return (

    

      

        

        

        

        Vite App

      

      

        


        

      

    

  )

}


export default Document

```

check [playground](/examples/) for more details

### solidjs

```tsx

import { defineConfig } from 'vite'

import solid from 'vite-plugin-solid'

import document from 'vite-plugin-document'

// https://vitejs.dev/config/

export default defineConfig({

  // ssr: true is required

  plugins: [solid({ ssr: true }), document({ solidjs: true })],

})

```

### inline scripts

```tsx

```

## options

### `documentFilepath` 

Custom `Document.tsx` filepath

- type `string`

- default `/src/Document.tsx`

### `outDir`

In build mode, `vite-plugin-document` will bundle `/src/Document.tsx` into disk

- type `string`

- default `/.vite-document`

### `solidjs`

Current framework is `solidjs`, when `solidjs` is `undefined` automatic set to `true` if `vite-plugin-solid` is found in vite plugins list.

- type `boolean`

- default ``

## development

- **Setup** - `pnpm i`

- **Build** - `pnpm build`

# 



*built with ❤️ by 😼*