Vite-plugin-partial NPM

Vite-Plugin-Partial

vite-plugin-partial allows you to insert blocks of external html into your html.

Let's say you have a bunch of meta tags at the start of your document, and they are getting in the way. With partials, you can just move them into a seperate file, and insert them into the original file.

//index.html - src
<html>
  <head>
      <vite-partial src="/meta.html"/>
      ...
  </head>
  ...
</html>

//meta.html
<meta name="author" content="John Doe">
<meta name="description" content="Lorem Ipsum">

This will result in the partial being inlined where the partial tag was.

//index.html
<html>
  <head>
      <meta name="author" content="John Doe">
      <meta name="description" content="Lorem Ipsum">
      ...
  </head>
  ...
</html>

Installation

npm install --save-dev vite-plugin-partial

// vite.config.js
import vitePluginPartial from 'vite-plugin-partial'

export default defineConfig({
  plugins: [vitePluginPartial()]
})

Notes

<vite-partial>'s src attribute can be an absolute or a relative path
Partials can include other partials, as long as they don't cause circular insertions.
You can put children into a <vite-partial> tag, but they will be ignored.
Do not nest <vite-partial> tags

vite vite-plugin partials

@infinitebrahmanuniverse/nolb-vite-plugin-p @everything-registry/sub-chunk-3061

1.0.0

2 years ago