https://github.com/fork/vite-plugin-twigjs-loader

https://github.com/fork/vite-plugin-twigjs-loader

Last synced: about 1 year ago
JSON representation

• Host: GitHub
• URL: https://github.com/fork/vite-plugin-twigjs-loader
• Owner: fork
• Created: 2025-02-25T14:08:54.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-02-25T14:43:14.000Z (over 1 year ago)
• Last Synced: 2025-05-07T23:07:27.384Z (about 1 year ago)
• Language: JavaScript
• Size: 11.7 KB
• Stars: 3
• Watchers: 5
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
A simple vite loader plugin - https://www.npmjs.com/package/vite-plugin-twigjs-loader

1. Installation

```bash

npm install -D vite-plugin-twigjs-loader

```

2. Add to your vite config

```javascript

// vite.config.js

import vue from '@vitejs/plugin-vue';

import twig from 'vite-plugin-twigjs-loader';

export default ({ command }) => ({

  plugins: [

    vue(),

    twig({

      namespaces: { '@projects': __dirname }, // // allows imports like this: '{% from "@projects/src/helper.html.twig" import some_helper_function %}'

      strict_variables: true

    }),

  ],

  resolve: {

    alias: {

      '@project': __dirname

    }

  }

});

```

3. Import twig components. This example shows using the plugin in a storybook story.

```javascript

// src/components/your-twig-components/YourTwigComponent.stories.js

// this is a function you can call, that renders to html via twigjs

import YourTwigComponent from './YourTwigComponent.twig';

export default {

  title: 'Components/YourTwigComponentStoryName',

};

const Template = args => ({

  template: YourTwigComponent({

    test: 'This string will be usable as "test" in your twig component'

  })

});

export const StoryName = Template.bind({});

```