vituum/vite-plugin-liquid

⚡️💧 Vite plugin for LiquidJS, transforms liquid templates into HTML

⚡⚙️ Vituum

Fast Prototyping with Template Engines in Vite

• ⚡ Vite Plugins
• 🚀️ Fast prototyping
• 💡 Template Engines
• ✉️ Email Templates

Small and fast static site generator for Vite.
It's a mix of words Vite (French word for "quick") and Tuum (Estonian word for "core").

Learn more about Vituum on Features page.

🪄 Get started

npm create vite@latest
npm i vituum --save-dev

Config

Read the Docs to learn more about configuration.

import vituum from 'vituum'

export default {
    plugins: [
        vituum()
    ]
}

You can try Vituum online on Stackblitz or view all examples on GitHub

Requirements

• Node.js LTS (16.x)

Licence

MIT

vite-plugin-liquid's Issues

npm build does not use data from JSON files

When using the following file structure (based on the provided example in VItuum repo)

and running build npm script, the resulting HTML files are not build using any of the data present in the JSON files.

When running dev script, everything works fine

npm Build Cannot Find File

Currently I have .liquid files and using the layout tag for example:

{% layout "pages/layouts/base.liquid" %}

It works in development, but on build it fails with a message:

[vite:build-html] ENOENT: Failed to lookup "pages/layouts/base.liquid" in "./src", line:2, col:3

For it to work on build it required me to add the .html extension as such:

{% layout "pages/layouts/base.liquid.html" %}

But then this fails in development

Error [ERR_REQUIRE_ESM]

Hi there, I'm getting the following but can't see any explicit use of require() in my config:

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/brendon/Templates/vue3-templates/node_modules/@vituum/vite-plugin-liquid/index.js from /Users/brendon/Templates/vue3-templates/vite.config.js not supported.
Instead change the require of index.js in /Users/brendon/Templates/vue3-templates/vite.config.js to a dynamic import() which is available in all CommonJS modules.

Is this a problem with vite-plugin-liquid or something I'm doing wrong? This is a vue-create project.

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import liquid from '@vituum/vite-plugin-liquid'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    liquid()
  ],
  root: `templates/${process.env.TEMPLATE}`,
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  optimizeDeps: {
    disabled: false
  },
  build: {
    commonjsOptions: {
      include: []
    }
  }
})