{"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,"search_vec":"'0.0.6':27 '2022':29 'activ':91 'addit':46 'appear':84 'base':42 'build':73 'cadenc':32 'configur':47 'current':23 'custom':50 'depend':64 'differenti':33 'direct':16 'e.g':74 'earli':88 'enabl':15 'file':20 'filter':51 'frontend':79 'function':52 'global':53 'import':17 'insid':71 'integr':58 'javascript':93 'javascript/typescript':22 'juli':28 'legaci':75 'like':49,78 'load':10 'loader':5,99 'low':30 'maintain':92 'modul':14 'note':82 'offer':45 'option':48 'peer':63 'php':77 'php-like':76 'plugin':3,8,37,97 'plus':56 'project':67,83 'releas':31 'requir':59 'set':55 'stabl':24 'stage':89 'storybook':57,81 'suitabl':65 'templat':12,70 'twig':4,11,19,38,69,98 'twig.js':60 'use':68 'version':25 'vite':2,7,36,72,94,96 'vite-plugin':95 'vite-plugin-twig':35 'vite-plugin-twig-load':1","created_at":"2026-04-27T17:07:40.688781+00:00","updated_at":"2026-04-27T17:07:40.688781+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/dark-kitt/vite-plugin-twig-loader","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vite-plugin-twig-loader","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-18","next_check":"2026-07-26","install_tag":null}}