Understanding the Hooks System - Dynamic Data Without the Complexity

One of Vitto’s defining features is its hooks system — a simple but powerful way to inject dynamic data into your static templates.

The Problem

Static sites are great for performance, but they often struggle with dynamic content. Traditional solutions include:

• Client-side fetching (slow, bad for SEO)
• Build-time data scripts (fragile, hard to maintain)
• External CMS (complex, costly)

The Hook Solution

Vitto hooks are async functions that run at build time. They fetch or generate data and make it available to your templates:

// hooks/posts.ts
import { defineHooks } from 'vitto';
import fs from 'node:fs/promises';
import path from 'node:path';

export default defineHooks('posts', async () => {
  const dir = path.join(process.cwd(), 'content/posts');
  const files = await fs.readdir(dir);
  const posts = await Promise.all(
    files.map(async (file) => {
      const content = await fs.readFile(path.join(dir, file), 'utf-8');
      return { slug: file.replace('.md', ''), content };
    })
  );
  return posts;
});

Using Data in Templates

Register the hook in vite.config.ts:

vitto({
  hooks: {
    posts: postsHook,
  },
});

Then access the data in any template:

{{ for post of posts }}
  <article>
    <h2>{{ post.title }}</h2>
    <a href="/blog/{{ post.slug }}">Read more</a>
  </article>
{{ /for }}

Hook Types

Best Practices

• Handle errors gracefully — return empty arrays instead of throwing
• Cache expensive operations when possible
• Keep hooks focused on a single data source
• Use TypeScript types for better IDE support