Awesome

vite-plugin-twig-loader

A Vite plugin to load Twig files.

Installation

yarn add -D vite-plugin-twig-loader

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

Usage

/* vite.config.js */
const twig = require('vite-plugin-twig-loader');

module.exports = defineConfig(({ command, mode }) => {
  return {
    plugins: [
      twig()
    ]
  };
})

Config

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.

Usage: Storybook

/* 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';

Options

Below is a list of the supported options.

index

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.

filters

type object

default {}

A collection of custom filters to extend Twig. Take a look at twig.js documentation to learn more.

functions

type object

default {}

A collection of custom functions to extend Twig. Find out more at twig.js documentation.

globals

type object

default {}

Global variables are injected into each template.

settings

type object

default {}

Twig settings. Please, take a look at twig.js documentation.

This plugin is based on the vite-plugin-twig plugin.