Vyuh Framework

Modular Flutter Applications

The core framework for building modular Flutter applications with Features and Plugins as the primary building blocks. Seamless, optional CMS integration for content-driven experiences.

Why Vyuh Framework?

Feature Modules

Compose your app from independent feature modules. Each feature encapsulates routes, content types, and business logic.

Plugin Architecture

Extend functionality with plugins for analytics, authentication, networking, storage, and more.

Optional CMS Integration

First-class support for headless CMS platforms like Sanity. Opt-in for content-driven experiences.

Modular Architecture

Build scalable apps with a clean separation of concerns. Features and Plugins are the core building blocks.

Getting Started

InstallationAdd Vyuh to your Flutter project

Quick StartBuild your first feature

ArchitectureUnderstand the framework design

Core Concepts

• Features — Self-contained modules with routes and content
• Plugins — Extend the framework with custom capabilities
• Content Types — Define and render CMS content
• Routing — Navigate between features and content
• Layouts — Compose pages from reusable building blocks

Building Blocks

Component	Purpose
Features	Modular app composition
Plugins	Extend with capabilities
Content Types	CMS content rendering
Actions	Handle user interactions
Conditions	Dynamic content visibility

Patterns & Examples

Feature CompositionCombine features into cohesive appsCMS IntegrationConnect to headless CMS platformsAuthenticationImplement auth flows and guardsBlog AppComplete blog implementationE-CommerceProduct catalog and cart example

Quick Example

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:vyuh_core/vyuh_core.dart' as vc;
import 'package:vyuh_extension_content/vyuh_extension_content.dart';
import 'package:vyuh_feature_system/vyuh_feature_system.dart' as system;
import 'package:vyuh_plugin_content_provider_sanity/vyuh_plugin_content_provider_sanity.dart';

// Define a feature module
final feature = FeatureDescriptor(
  name: 'blog',
  title: 'Blog Feature',
  description: 'A blog feature with posts and categories',
  icon: Icons.article,
  init: () async {
    // Register feature dependencies
    vyuh.di.register(BlogApi(vyuh.content.provider));
  },
  extensions: [
    ContentExtensionDescriptor(
      contentBuilders: [
        BlogPost.contentBuilder,
        BlogCategory.contentBuilder,
      ],
    ),
  ],
  routes: () => [
    GoRoute(path: '/blog', pageBuilder: defaultRoutePageBuilder),
    GoRoute(path: '/blog/:slug', pageBuilder: defaultRoutePageBuilder),
  ],
);

// Bootstrap the app with features and plugins
void main() async {
  vc.runApp(
    initialLocation: '/blog',
    features: () => [
      system.feature,
      feature,
    ],
    plugins: PluginDescriptor(
      content: DefaultContentPlugin(
        provider: SanityContentProvider.withConfig(
          config: SanityConfig(
            projectId: 'your-project-id',
            dataset: 'production',
          ),
        ),
      ),
      env: vc.DefaultEnvPlugin(),
    ),
  );
}