@finema/finework-layer

A comprehensive Nuxt Layer providing reusable components, composables, layouts, and utilities for Finework applications.


📚 Documentation

$3

- Quick Start Guide - Get started in 5 minutes
- Component Examples - Real-world usage examples
- API Reference - Complete API documentation
- Architecture - System design and patterns
- Troubleshooting - Common issues and solutions

$3

- LLM Guide - Comprehensive guide for AI code generation

🚀 Features

- ✅ Authentication System - Complete auth flow with permissions
- ✅ Layout Components - Admin and User layouts
- ✅ Data Loading - Smart loading states with StatusBox
- ✅ Form Handling - Validation with Valibot
- ✅ Type Safety - Full TypeScript support
- ✅ Auto-imports - Components, composables, and constants
- ✅ Middleware - Auth, permissions, and route guards
- ✅ UI Components - Built on @nuxt/ui

📦 Installation

``bash
pnpm add @finema/finework-layer
`

🎯 Quick Start

$3

`typescript
// nuxt.config.ts
export default defineNuxtConfig({
extends: ["@finema/finework-layer"],

runtimeConfig: {
public: {
baseAPI: process.env.NUXT_PUBLIC_BASE_API,
},
},
});
`

$3

`vue



`

🏗️ Project Structure

`
@finema/finework-layer/
├── app/
│ ├── components/ # Reusable components
│ │ ├── Button/ # Button variants
│ │ ├── Layout/ # Layout components
│ │ ├── InfoItemList.vue
│ │ └── StatusBox.vue
│ ├── composables/ # Vue composables
│ │ ├── useAuth.ts
│ │ └── useRequestOptions.ts
│ ├── constants/ # App constants
│ │ └── routes.ts
│ ├── middleware/ # Route middleware
│ │ ├── auth.ts
│ │ ├── permissions.ts
│ │ └── guest.ts
│ └── app.config.ts # App configuration
├── .playground/ # Development playground
└── docs/ # Documentation
`

🎨 Key Components

$3

Handles loading, error, and empty states automatically.

`vue



`

$3

Display key-value information in a clean layout.

`vue
:items="[
{ label: 'Name', value: user.name },
{ label: 'Email', value: user.email },
{ label: 'Active', value: user.is_active, type: 'boolean' },
]"
/>
`

$3

Pre-built layouts for admin and user interfaces.

`vue



`

🔐 Authentication

Built-in authentication system with permission management.

`typescript
const auth = useAuth();

// Check authentication
if (auth.isAuthenticated.value) {
console.log("User:", auth.me.value);
}

// Check permissions
if (auth.hasPermission(UserModule.PMO, Permission.ADMIN)) {
// User has PMO admin access
}
`

🛠️ Development

$3

`bash


Install dependencies

pnpm install

Start development server

pnpm dev

Build for production

pnpm build

Run linter

pnpm lint

Fix linting issues

pnpm lint:fix
`

$3

The .playground directory is used for development and testing. It imports the layer itself, allowing you to test changes in real-time.

`bash


Start playground


pnpm dev
`

📝 Publishing

`bash


Update version and create changelog

pnpm release

Or manually

npm publish --access public
``

🤝 Contributing

1. Create a feature branch
2. Make your changes
3. Run tests and linting
4. Submit a pull request

📄 License

MIT License - see LICENSE file for details

🔗 Links

- Nuxt Documentation
- Nuxt UI Documentation
- @finema/core

📞 Support

For issues and questions:

1. Check the Troubleshooting Guide
2. Review Component Examples
3. Consult the API Reference

---

Version: 0.2.50
Last Updated: 2025-11-07
Maintained by: Finema Team