Vue Wrapper Framework

A flexible and modular Vue.js framework for building micro-frontend applications with TypeScript support. This framework enables you to create scalable applications by dynamically importing independent features as needed.

Features

• 🎯 Dynamic micro-frontend loading
• 🔒 Type-safe with full TypeScript support
• 🎨 Customizable theming
• 📦 Pre-built modular components
• 🛠️ CLI tools for project management
• 🔌 Easy-to-use plugin system
• 📱 Responsive design ready

Installation

# Create a new project
npx @arrkid/vue-wrapper create my-app

# Navigate to project directory
cd my-app

# Start development server
npm run dev

Available Features

Currently, the framework includes two pre-built features:

Feature A: Counter

A simple counter component demonstrating state management and event handling.

npx vue-wrapper import featureA

Feature B: Todo List

A fully functional todo list with add, remove, and toggle capabilities.

npx vue-wrapper import featureB

Basic Usage

<template>
  <FrameworkWrapper :config="config">
    <template #header>
      <nav>
        <!-- Your navigation -->
      </nav>
    </template>
    
    <router-view></router-view>
    
    <template #footer>
      <footer>
        <!-- Your footer -->
      </footer>
    </template>
  </FrameworkWrapper>
</template>

<script setup lang="ts">
import { FrameworkWrapper } from '@yourusername/vue-wrapper-framework';

const config = {
  features: ['featureA', 'featureB'],
  theme: {
    primary: '#42b883',
    secondary: '#35495e'
  }
};
</script>

Configuration

The framework accepts a configuration object with the following options:

interface WrapperConfig {
  // List of features to load
  features?: string[];
  
  // Theme configuration
  theme?: {
    primary: string;
    secondary: string;
  };
}

Creating Custom Features

1. Create a new feature module:

import type { FeatureModule } from '@yourusername/vue-wrapper-framework';

const myFeature: FeatureModule = {
  name: 'myFeature',
  component: MyComponent,
  routes: [
    {
      path: '/my-feature',
      component: MyComponent
    }
  ],
  async setup() {
    // Initialization logic
  }
};

export default myFeature;

2. Register your feature in the wrapper configuration:

const config = {
  features: ['myFeature'],
  // ... other config options
};

CLI Commands

# Create a new project
npx vue-wrapper create my-app

# Import features
npx vue-wrapper import featureA featureB

# Add a new feature (scaffolding)
npx vue-wrapper generate feature my-feature

Project Structure

my-app/
├── src/
│   ├── components/
│   │   └── FrameworkWrapper.vue
│   ├── features/
│   │   ├── featureA/
│   │   └── featureB/
│   ├── core/
│   │   ├── createApp.ts
│   │   ├── featureLoader.ts
│   │   └── store.ts
│   └── types/
│       └── index.ts
├── package.json
└── vite.config.ts

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Run tests
npm test

Best Practices

1. Feature Independence: Each feature should be self-contained with its own components, styles, and logic.

2. Type Safety: Always use TypeScript interfaces and types for component props and state.

3. Error Handling: Implement error boundaries and loading states for feature imports.

4. Performance: Use lazy loading for features that aren't immediately needed.

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some 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.

Support

For support, please:

1. Check the documentation
2. Open an issue
3. Submit a feature request
4. Contribute to the project

Acknowledgments

• Vue.js team for the amazing framework
• All contributors who have helped shape this project
• The Vue community for inspiration and support

Author

[Your Name]

• GitHub: @eliemugenzi
• npm: @eliemugenzi