{"id":22899,"library":"vite-plugin-twig-loader","title":"vite-plugin-twig-loader","description":"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.","status":"active","version":"0.0.6","language":"javascript","source_language":"en","source_url":"https://github.com/dark-kitt/vite-plugin-twig-loader","tags":["javascript","vite","vite-plugin","twig","loader"],"install":[{"cmd":"npm install vite-plugin-twig-loader","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-twig-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-twig-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"required peer dependency for Twig templating engine","package":"twig","optional":false}],"imports":[{"note":"ESM-only? Imports default export; works with both ESM and CJS in Vite config","wrong":"const twig = require('vite-plugin-twig-loader')","symbol":"default (vite-plugin-twig-loader)","correct":"import twig from 'vite-plugin-twig-loader'"},{"note":"Default export is the compiled template string; named exports path, ctx, globals, settings are available for advanced usage","wrong":"import template from './template.twig'","symbol":"default (twig template import)","correct":"import template, { path, ctx, globals, settings } from './template.twig'"},{"note":"CommonJS vs ESM: 'twig' package ships CJS; use require() in Node.js scripts, or configure Vite to handle CJS","wrong":"const Twig = require('twig')","symbol":"Twig from twig.js","correct":"import Twig from 'twig'"}],"quickstart":{"code":"// vite.config.js\nimport { defineConfig } from 'vite';\nimport twig from 'vite-plugin-twig-loader';\n\nexport default defineConfig({\n  plugins: [\n    twig({\n      // optional: filters: { myFilter: (val) => val.toUpperCase() },\n      // optional: functions: { myFunction: (arg) => `Hello ${arg}` },\n      // optional: globals: { siteName: 'My Site' },\n      // optional: settings: { cache: false }\n    })\n  ]\n});\n\n// Then in any module:\nimport cardTemplate, { path, ctx, globals, settings } from './card.twig';\nconsole.log('Template string:', cardTemplate);\nconsole.log('Source path:', path);\nconsole.log('Context (raw template content):', ctx);\nconsole.log('Globals:', globals);\nconsole.log('Settings:', settings);\n\n// To render with twig.js:\nimport Twig from 'twig';\nconst output = Twig.twig({ data: ctx }).render({ title: 'Hello', body: 'World' });","lang":"javascript","description":"Shows Vite config setup and how to import a .twig file and use it with twig.js for rendering."},"warnings":[{"fix":"Replace 'vite-plugin-twig' with 'vite-plugin-twig-loader' in package.json and vite config.","message":"Plugin name change from 'vite-plugin-twig' (original) to 'vite-plugin-twig-loader' — existing configs using the old plugin will break.","severity":"breaking","affected_versions":">=0.0.0"},{"fix":"Run: npm install twig --save-dev.","message":"The plugin requires 'twig' as a peer dependency; failure to install it (or installing incompatible version) results in runtime errors.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Avoid using 'index' option; rely on Vite's default index.html entry.","message":"The plugin's 'index' option may interfere with Vite's expectation of an index.html; using it can break the build.","severity":"deprecated","affected_versions":"0.0.6"},{"fix":"Use Twig.twig({ data: template }).render(args) as shown in Storybook examples.","message":"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.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"npm install vite-plugin-twig-loader --save-dev","cause":"Package not installed or version mismatch.","error":"Cannot find module 'vite-plugin-twig-loader'"},{"fix":"npm install twig --save-dev","cause":"Peer dependency 'twig' not installed.","error":"Cannot find module 'twig'"},{"fix":"Add 'twig()' to plugins array in vite.config.js and restart dev server.","cause":"Plugin not added to Vite config or not properly configured.","error":"Failed to load .twig file: 'You may need an additional loader'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}