Fluent VX


Zero-config frontend framework with automatic routing and optimization

Fluent VX is a next-generation frontend framework that prioritizes developer experience with zero configuration. It provides automatic routing, reactive templates, and intelligent optimization out of the box.

✨ Features

- 🚀 Zero Configuration - Just vx init and start coding
- 🛣️ Automatic File-based Routing - Pages in src/pages/ become routes
- ⚡ Built-in Reactivity - Reactive data binding without extra setup
- 🎨 Simple Template Syntax - Clean .vx files with familiar syntax
- 🔧 Auto Optimization - Intelligent bundling and minification
- 📦 Modern Build System - ES modules, TypeScript support
- 🛠️ Professional CLI - Create, develop, build, and deploy
- 🔌 Extensible Architecture - Plugin system for integrations

🚀 Quick Start

$3

``bash

Create a new Fluent VX project

npx vx create my-app
cd my-app

Install dependencies

npm install

Start development server

npm run dev
`

$3

`bash

Initialize in current directory

npx vx init

Install dependencies

npm install

Start development server

npm run dev
`

That's it! Your app is running at http://localhost:5172

📁 Project Structure

`
my-app/
├── src/
│ ├── app.vx # Main application layout
│ ├── pages/ # File-based routing
│ │ ├── index.vx # Home page (/)
│ │ └── about.vx # About page (/about)
│ └── styles/
│ └── global.css # Global styles
├── fluent-vx.config.ts # Configuration (optional)
├── package.json
└── README.md
`

🎨 Template Syntax

Fluent VX uses a simple, reactive template syntax:

`vx
// pages/index.vx
#data
title = "Hello World"
count = 0
items = ["Item 1", "Item 2", "Item 3"]
#end data

#view

{{ title }}

Count: {{ count }}

Increment

@for(item in items)

• {{ item }}

@end for

@if(count > 5)

Count is high!

@end if

#end view

#style
.container {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
}
#end style
`

🛣️ Routing

Routes are automatically created from files in src/pages/:

`
src/pages/
├── index.vx → /
├── about.vx → /about
├── blog.vx → /blog
├── blog/
│ ├── index.vx → /blog
│ └── [id].vx → /blog/:id
└── [...slug].vx → /blog/*
`

🔧 CLI Commands

`bash

Create new project

vx create

Initialize in current directory

vx init

Start development server

vx dev

Build for production

vx build

Preview production build

vx preview

Add integration

vx add

Remove integration

vx remove

Verify and fix integrations

vx iv
`

🔌 Integrations

Fluent VX supports integrations for enhanced functionality:

`bash

Add Tailwind CSS

vx add tailwind

Add MDX support

vx add mdx

Add sitemap generation

vx add sitemap
`

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Built with ❤️ by VeelV Team