@arrkid/vue-wrapper-framework NPM

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-framework 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 '@arrkid/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

Create a new feature module:

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

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

export default myFeature;

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

Feature Independence: Each feature should be self-contained with its own components, styles, and logic.
Type Safety: Always use TypeScript interfaces and types for component props and state.
Error Handling: Implement error boundaries and loading states for feature imports.
Performance: Use lazy loading for features that aren't immediately needed.