Fumi (Japenese word for Flavor - 風味)

A lightweight, intuitive template language for Vue 3. Write cleaner templates with {% blocks that compile to standard Vue directives — zero runtime overhead, full IDE support.

Features

• ⚡ Zero Runtime — Compiles to Vue directives at build time. No client JS added.
• 💚 Vue Native — All Vue Directives supported - v-if, v-for, v-show etc.
• 🔥 Easy setup — Drop-in Vite & Volar. Set lang="fumi" and start writing.
• 🧠 IDE Ready — Hover, autocomplete, go-to-definition, and vue-tsc via Volar.
• 📍 Source Mapped — Errors and IDE features map back to exact Fumi source lines.
• 🛠️ Zero Config — Sensible defaults. No setup files needed.
• 🎨 Simple Syntax — {% ... %} Readable block-style directives.

Installation

npm install @subwaytime/fumi
# or
pnpm add @subwaytime/fumi
# or
yarn add @subwaytime/fumi
# or
bun add @subwaytime/fumi

Getting Started

1. Configure Vite

Add the Fumi Vite to your vite.config.ts:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { fumi } from '@subwaytime/fumi/vite';

export default defineConfig({
  plugins: [
    fumi(),
    vue(),
  ],
});

2. Configure Volar (IDE + Type-Checking)

Add the Fumi Volar plugin to your tsconfig.json:

{
  "vueCompilerOptions": {
    "plugins": [
      "@subwaytime/fumi/volar"
    ]
  }
}

This enables:

• Syntax highlighting for Fumi templates
• Hover info on directives and variables
• Autocompletion for expressions
• Go-to-definition mapped to your source
• vue-tsc type-checking with accurate error positions

3. Write Fumi Templates

Use lang="fumi" in your Vue SFC:

<template lang="fumi">
  {% if showList %}
    <ul>
      {% for item in items :key="item.id" %}
        <li>{{ item.name }}</li>
      {% endfor %}
    </ul>
  {% else %}
    <p>No items available</p>
  {% endif %}
</template>

<script setup>
const items = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
];
const showList = true;
</script>

This compiles to:

<template>
  <ul v-if="showList">
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
  <p v-else="true">No items available</p>
</template>

Usage

Conditionals

{% if user %}
  <p>Welcome, {{ user.name }}!</p>
{% else-if guest %}
  <p>Welcome, guest!</p>
{% else %}
  <p>Please log in.</p>
{% endif %}

Loops

{% for item in items :key="item.id" %}
  <div>{{ item.title }}</div>
{% endfor %}

With destructuring and v-memo:

{% for (product, index) in products :key="product.id" :memo="[product.price]" %}
  <div>{{ product.name }}</div>
{% endfor %}

Visibility

{% show isVisible %}
  <div>This is conditionally shown</div>
{% endshow %}

One-time Render

{% once %}
  <div>Rendered once, never updated</div>
{% endonce %}

Raw HTML

{% html rawContent %}
  <div>Placeholder</div>
{% endhtml %}

Directive Checklist

Fumi Block	Vue Directive	Syntax Highlighting	Intellisense	Notes
{% if %}	v-if	✅	✅	Supports !, &&, ===, >, ??, .length etc
{% else %}	v-else	✅	✅	—
{% else-if %}	v-else-if	✅	✅	—
{% for %}	v-for	✅	✅	Supports destructuring (item, index)
for-:key extra	:key	✅	✅	Loop key binding
for-:memo extra	v-memo	✅	✅	Loop memoization
{% show %}	v-show	✅	✅	—
{% cloak %}	v-cloak	✅	✅	—
{% once %}	v-once	✅	✅	—
{% pre %}	v-pre	✅	✅	—
{% text %}	v-text	✅	✅	—
{% html %}	v-html	✅	✅	—
{% memo %}	v-memo	✅	✅	Standalone
{{ expr }}	—	✅	✅	Variable interpolation

Development

# Install dependencies
bun install

# Run tests
bun test

# Build distribution
bun bundle

License

MIT License © 2026-PRESENT Leon Langer