@appframework/vue

Vue components and TypeScript libraries for appframework.

Installation

npm install @appframework/vue

Usage

Components

<script setup>
import { BinaryDataImage, ListComponent } from '@appframework/vue';
</script>

<template>
  <BinaryDataImage :upload-path="'/rest/binary_data'" />
  <ListComponent :items="items" />
</template>

Library Functions

import { getExisting, saveNew } from '@appframework/vue';

// Get data from API
const data = await getExisting('your-dto');

// Save new data
await saveNew('your-dto', newData);

Contributing

We welcome contributions to @appframework/vue! This section will help you get started with development.

Development Setup

1. Clone the repository

   git clone <repository-url>
   cd appframework-vue

2. Install dependencies

   npm install

3. Start the development server

   npm run demo

   This will start a Vite development server with a live demo of all components and functionality.

Demo Environment

The demo environment provides a complete testing playground for all components:

• Mock GraphQL and REST Server: The demo includes a fully functional mock GraphQL server (demo/mock-server.ts) and a mock REST server (demo/mock-rest.ts) that intercepts GraphQL and REST requests and provides test data

• Sample Data: Mock data is defined in demo/mock-data.ts, including support for:

  • User queries with pagination, sorting, and filtering in GraphQL
  • Realistic user data with roles and permissions
  • Error handling scenarios

• Component Testing: All components can be tested in isolation with the mock data, allowing you to:

  • Test different data scenarios
  • Verify component behavior without a real backend
  • Develop new features rapidly

Development Workflow

1. Run the demo: npm run demo to start the development environment
2. Make changes: Edit components in src/components/ or library functions in src/lib/
3. Test changes: The demo will hot-reload to show your changes immediately
4. Run tests: npm test to run the test suite
5. Check code quality: npm run check to run Biome linting and formatting

Project Structure

src/
├── components/     # Vue components
├── lib/            # TypeScript utility functions
├── locales/        # Internationalization files
└── views/          # Vue views/pages

demo/
├── mock-*.ts       # Mock server setup
└── *.vue           # Demo components and examples

Building

• Development build: npm run demo:build
• Production build: npm run build
• Preview build: npm run preview

Testing

• Run tests: npm test
• Coverage report: npm run coverage

The mock server setup makes it easy to test GraphQL-dependent components without needing a real backend, ensuring consistent and reliable development experience.