https://github.com/fiadone/vite-plugin-twig

https://github.com/fiadone/vite-plugin-twig

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/fiadone/vite-plugin-twig
• Owner: fiadone
• License: mit
• Created: 2021-12-30T15:30:43.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-08-08T15:43:09.000Z (about 2 years ago)
• Last Synced: 2024-07-18T09:15:19.475Z (2 months ago)
• Language: TypeScript
• Size: 71.3 KB
• Stars: 17
• Watchers: 1
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: README-v1.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vite-plugin-twig

[Vite](https://github.com/vitejs/vite) plugin for [Twig](https://github.com/twigjs/twig.js/).

---

## ⚠️ Notice

This documentation refers to the version *1.x* of the plugin. Take a look [here](./README.md) for latest releases.

## Installation

```

npm i -D vite-plugin-twig

```

## Usage

```js

/* vite.config.js */

import { defineConfig } from 'vite'

import twig from 'vite-plugin-twig'

export default defineConfig({

  // ...

  plugins: [

    twig()

  ]

})

```

### Options

The plugin can be configured both via the *twig.config.js* file from the project root or by passing a configuration object directly as argument to the function above (in this last case, the configuration file will be ignored).

Here below the list of the supported options.

#### `filters`

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

__default__ `{}`

A collection of custom filters to extend *Twig*. Look at [*twig.js* documentation](https://github.com/twigjs/twig.js/wiki/Extending-twig.js) to learn more.

#### `functions`

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

__default__ `{}`

A collection of custom functions to extend *Twig*. Look at [*twig.js* documentation](https://github.com/twigjs/twig.js/wiki/Extending-twig.js) to learn more.

#### `globals`

__type__ `{ [key: string]: any }`

__default__ `{}`

The global variables to be injected in each template.

#### `settings`

__type__ `{ [key: string]: any }`

__default__ `{}`

The *Twig* settings. Please refer to [*twig.js* documentation](https://github.com/twigjs/twig.js/wiki/) 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:

```html

  {

    "template": "path/to/template.twig",

    "data": {

      "title": "Homepage"

    }

  }

```

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

> ℹ️ The *script* tag is not mandatory, since a plain text representation of the *json* will be correctly parsed too. However, it is recommended for readability and syntax highlighting purposes.