@fiad/vite-plugin-twig

@fiad/vite-plugin-twig

A simple Vite plugin for Twig template engine usage (based on twig.js).

Installation

npm i -D @fiad/vite-plugin-twig

Usage

/* vite.config.js */
import twig from '@fiad/vite-plugin-twig'

export default {
  plugins: [
    twig()
  ]
}

Options

An options object can also be passed as argument with the properties listed here below.

filters

type { [key: string]: (...args: any[]) => any }

default {}

A collection of custom filters to extend Twig. Look at twig.js documentation to learn more.

functions

type { [key: string]: (...args: any[]) => any }

default {}

A collection of custom functions to extend Twig. Look at twig.js documentation to learn more.

globals

type { [key: string]: any }

default {}

The global data to be injected in each template.

settings

type { [key: string]: any }

default {}

The Twig settings. Please refer to twig.js documentation to learn more.

Templates

The html files located by default in the Vite project root are not intented to be replaced directly by the twig ones as the normal page files resolution/linking on the Vite's dev server is wanted to be preserved along with the build logic. However, those files are supposed to contain a json definition instead of the traditional markup, which should be moved on the twig side.

More in details, a html file should look like this:

<!-- index.html -->
<script type="application/json">
  {
    "template": "path/to/template.twig",
    "data": {
      "title": "Homepage"
    }
  }
</script>

where template is the path of the twig template to be rendered (relative to the cwd), and data is the local context for that page (eventually merged with the globals provided via plugin options).