Registry / web-framework / vite-plugin-twig-loader

vite-plugin-twig-loader

JSON →
library0.0.6jsnpmunverified

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.

npm install vite-plugin-twig-loader
INSTALL
IMPORT
SIG · VITE-PLUGIN-TWIG-L
V
vite-plugin-twig-loader
web-frameworkjavascriptv0.0.6
Install
Import
Disk
Pass rate
0/ 6
Env Coverage0 / 6
glibc
1822
musl
1822
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18223 runs
build_error
glibc
node 18223 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

default (vite-plugin-twig-loader)
import twig from 'vite-plugin-twig-loader'
const twig = require('vite-plugin-twig-loader')
ESM-only? Imports default export; works with both ESM and CJS in Vite config
default (twig template import)
import template, { path, ctx, globals, settings } from './template.twig'
import template 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
import Twig from 'twig'
const Twig = require('twig')
CommonJS vs ESM: 'twig' package ships CJS; use require() in Node.js scripts, or configure Vite to handle CJS

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' });
Debug
Known issues
breakingPlugin 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.
affects: >=0.0.0
gotchaThe 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.
affects: >=0.0.0
deprecatedThe 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.
affects: 0.0.6
gotchaWhen 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.
affects: >=0.0.0
Errors
Common errors & fixes
Cannot find module 'vite-plugin-twig-loader'
Package not installed or version mismatch.
fix
npm install vite-plugin-twig-loader --save-dev
Cannot find module 'twig'
Peer dependency 'twig' not installed.
fix
npm install twig --save-dev
Failed to load .twig file: 'You may need an additional loader'
Plugin not added to Vite config or not properly configured.
fix
Add 'twig()' to plugins array in vite.config.js and restart dev server.
Upgrade
Version history
0.0.6latest on npm
Audit
Dependencies
twigrequiredrequired peer dependency for Twig templating engine
Agent activity
10 hits · last 30 days
node
8
OpenAI (training)
1
Resources
vite-plugin-twig-loader — npm install vite-plugin-twig-loader · libregistry