vite-plugin-twig-loader

0.0.6 verified Mon Apr 27 auth: no javascript

A Vite plugin that loads Twig templates as modules, enabling direct import of .twig files in JavaScript/TypeScript. Current stable version is 0.0.6 (July 2022). Low release cadence. Differentiates from vite-plugin-twig (which it is based on) by offering additional configuration options like custom filters, functions, globals, and settings, plus Storybook integration. Requires twig.js as a peer dependency. Suitable for projects using Twig templating inside Vite builds (e.g., legacy PHP-like frontends or Storybook). Note: project appears to be in early stage, not actively maintained.

Common errors

error Cannot find module 'vite-plugin-twig-loader' ↓

cause Package not installed or version mismatch.

fix

npm install vite-plugin-twig-loader --save-dev

error Cannot find module 'twig' ↓

cause Peer dependency 'twig' not installed.

fix

npm install twig --save-dev

error Failed to load .twig file: 'You may need an additional loader' ↓

cause Plugin not added to Vite config or not properly configured.

fix

Add 'twig()' to plugins array in vite.config.js and restart dev server.

Warnings

breaking Plugin name change from 'vite-plugin-twig' (original) to 'vite-plugin-twig-loader' — existing configs using the old plugin will break. ↓

fix Replace 'vite-plugin-twig' with 'vite-plugin-twig-loader' in package.json and vite config.

gotcha The plugin requires 'twig' as a peer dependency; failure to install it (or installing incompatible version) results in runtime errors. ↓

fix Run: npm install twig --save-dev.

deprecated The plugin's 'index' option may interfere with Vite's expectation of an index.html; using it can break the build. ↓

fix Avoid using 'index' option; rely on Vite's default index.html entry.

gotcha When using import default from .twig file, the default export is the raw template string, not a render function. Renders must use twig.js separately. ↓

fix Use Twig.twig({ data: template }).render(args) as shown in Storybook examples.

Install

npm install vite-plugin-twig-loader

yarn add vite-plugin-twig-loader

pnpm add vite-plugin-twig-loader

Imports

default (vite-plugin-twig-loader)
wrong
```
const twig = require('vite-plugin-twig-loader')
```
correct
```
import twig from 'vite-plugin-twig-loader'
```
ESM-only? Imports default export; works with both ESM and CJS in Vite config
default (twig template import)
wrong
```
import template from './template.twig'
```
correct
```
import template, { path, ctx, globals, settings } from './template.twig'
```
Default export is the compiled template string; named exports path, ctx, globals, settings are available for advanced usage
Twig from twig.js
wrong
```
const Twig = require('twig')
```
correct
```
import Twig from 'twig'
```
CommonJS vs ESM: 'twig' package ships CJS; use require() in Node.js scripts, or configure Vite to handle CJS

Quickstart

Shows Vite config setup and how to import a .twig file and use it with twig.js for rendering.

// vite.config.js
import { defineConfig } from 'vite';
import twig from 'vite-plugin-twig-loader';

export default defineConfig({
  plugins: [
    twig({
      // optional: filters: { myFilter: (val) => val.toUpperCase() },
      // optional: functions: { myFunction: (arg) => `Hello ${arg}` },
      // optional: globals: { siteName: 'My Site' },
      // optional: settings: { cache: false }
    })
  ]
});

// Then in any module:
import cardTemplate, { path, ctx, globals, settings } from './card.twig';
console.log('Template string:', cardTemplate);
console.log('Source path:', path);
console.log('Context (raw template content):', ctx);
console.log('Globals:', globals);
console.log('Settings:', settings);

// To render with twig.js:
import Twig from 'twig';
const output = Twig.twig({ data: ctx }).render({ title: 'Hello', body: 'World' });