A Vite plugin to load Twig files.
yarn add -D vite-plugin-twig-loader
npm i vite-plugin-twig-loader --save-dev
/* vite.config.js */ const twig = require('vite-plugin-twig-loader'); module.exports = defineConfig(({ command, mode }) => { return { plugins: [ twig() ] }; })
The plugin can be configured via the twig.config.js file from the project root directory or by passing a configuration object directly as an argument to the function above.
/* path/to/App.stories.js */ import Twig from 'twig'; // Vue App // index.js => createApp(App).mount('#app'); import App from './index.js'; import AppTwig, { path, ctx, globals, settings } from './App.html.twig'; export default { title: 'Apps', component: App }; const Template = (args) => ({ components: { App }, setup() { return { args }; }, template: Twig.twig({data: ctx}).render(args) }); export const AppStorie = Template.bind({}); AppStorie.args = { primary: true }; AppStorie.parameters = { layout: 'fullscreen' }; AppStorie.storyName = 'My example App';
or
/* path/to/Button.stories.js */ import Twig from 'twig'; import Button, { path, ctx, globals, settings } from './Button.html.twig'; export default { title: 'Components/Atom', component: Button }; const Template = (args) => ({ template: Twig.twig({data: ctx}).render(args) }); export const ButtonStorie = Template.bind({}); ButtonStorie.args = { primary: true }; ButtonStorie.parameters = { layout: 'fullscreen' }; ButtonStorie.storyName = 'My Button';
Below is a list of the supported options.
type string
default null
Option to define a file path for the main entry point (e.g. src/template/index.twig). NOTE: the vite index.html file is required.
type object
default {}
A collection of custom filters to extend Twig. Take a look at twig.js documentation to learn more.
type object
default {}
A collection of custom functions to extend Twig. Find out more at twig.js documentation.
type object
default {}
Global variables are injected into each template.
type object
default {}
Twig settings. Please, take a look at twig.js documentation.
This plugin is based on the vite-plugin-twig plugin.