Welcome to VitePet Framework! 🎯

VitePet is a simple yet powerful Static Site Generator built on top of petite-vue. It allows you to create reusable HTML components with built-in interactivity while maintaining the simplicity of static sites.

Key Features

🧩 Reusable Components - Create HTML components with built-in logic
⚡ Petite-Vue Integration - 6KB reactive framework for interactivity
📦 Static Site Generation - Pre-rendered HTML for fast loading
🔥 Hot Reload - Development server with file watching
📄 Template Engine - Variables, helpers, and layouts
🎨 Component Composition - Mix and match components easily

Interactive Components Demo

Counter Component

A simple interactive counter built with petite-vue:

Count is {{ count === 0 ? 'zero' : count > 0 ? 'positive' : 'negative' }}

Todo List Component

A fully functional todo list with local state management:

Welcome to VitePet

{{ remainingCount }} remaining {{ completedCount }} completed

{{ todo.text }}

🎉 No todos! You're all caught up!

How It Works

1. Create Components

Components are simple HTML files with frontmatter, template, and optional logic:

---
props: ["initialCount", "label"]
---

<div v-scope="{ count: {{initialCount}} || 0 }">
    <h3>{{label}}</h3>
    <button @click="count++">{{ count }}</button>
</div>

<script>
({
    mounted() {
        console.log('Component mounted!')
    }
})
</script>

2. Use Components in Pages

Reference components in your pages with a simple tag syntax:

<component name="counter" initialCount="10" label="Page Counter" />

3. Build Static Site

Generate optimized static HTML with embedded petite-vue for interactivity:

npm run build

Getting Started

Create components in src/components/
Create pages in src/pages/
Design layouts in src/layouts/
Run npm run dev for development
Run npm run build for production

Framework Philosophy

VitePet follows the philosophy of progressive enhancement. Your sites work without JavaScript and are enhanced with interactivity where needed. This approach provides:

Fast initial page loads
SEO-friendly content
Accessible by default
Graceful degradation

Perfect for blogs, documentation sites, marketing pages, and small applications that need a touch of interactivity without the complexity of a full SPA framework.

Built with ❤️ using VitePet Framework
Powered by petite-vue • Static Site Generation • Component Architecture

🎯 VitePet Framework