@nembedemand/mindeportalen-v3

Mindeportalen Component Library

A robust, reusable Vue 3 component library with Tailwind CSS and Pinia support, designed for seamless integration with Nuxt 3 and other Vue applications.

🚀 Quick Start

npm install mindeportalen-components

Required peer dependencies:

npm install vue@^3.0.0 pinia@^2.0.0 sass

📖 Documentation

For comprehensive usage instructions, see LIBRARY_USAGE.md

✨ Features

• 🎨 Style Isolated: Tailwind CSS with custom mp- prefix
• 🏪 Pinia Integration: Optional stores with SSR-safe composables
• 🔧 TypeScript: Fully typed with comprehensive type safety
• 🌊 SSR Compatible: Works seamlessly with Nuxt 3
• 📦 Tree Shakeable: Import only what you need
• ♿ Accessible: Built-in accessibility features

🎯 Main Components

• OverviewPage - Main component for Vue 3 apps
• OverviewPageNuxt - Nuxt-optimized version with SSR support

🏪 Pinia Stores

• Authentication, Frontend config, Cart, Charity orgs
• Google Maps, Page management, Greetings, and more
• All with SSR-safe access patterns

🔧 Quick Usage

Vue 3

import { OverviewPage, createMindeportalenStoresPlugin } from 'mindeportalen-components'

const pinia = createPinia()
pinia.use(createMindeportalenStoresPlugin())
app.use(pinia)

Nuxt 3

import { OverviewPageNuxt } from 'mindeportalen-components'
// + Nuxt plugin setup (see full docs)
// ⚠️  Always wrap in <ClientOnly> for SSR compatibility

🎨 Style Isolation

The library uses Tailwind CSS with a custom mp- prefix to prevent conflicts:

• ✅ No utility class conflicts: All classes prefixed with mp-
• ✅ Scoped styles: Component styles are isolated
• ✅ SSR Compatible: Works with Nuxt 3 and other SSR frameworks
• ✅ No global resets: Doesn't override your application styles

🔧 Architecture

The library exports only the main components and utilities needed:

• Components: OverviewPage, OverviewPageNuxt
• Stores: Auth, Frontend, Cart, Page management, etc.
• Composables: useSafePinia, useGetData
• Plugins: Pinia integration for both Vue and Nuxt
• Utilities: Type-safe helpers for common operations

🧪 Type Safety

All exports are fully typed with comprehensive TypeScript support:

import type { User, AuthState, FrontendConfig } from 'mindeportalen-components'

🌊 SSR Compatibility

Every component and composable is designed for SSR:

• Safe hydration patterns
• Fallback values during server rendering
• No browser-only APIs during SSR
• Nuxt 3 optimized components

Development

To set up the project for development:

git clone <repository-url>
cd mindeportalen-v3
pnpm install

Commands

• pnpm dev - Start development server with demo
• pnpm build - Build the library for production
• pnpm build-demo - Build the demo for production
• pnpm type-check - Run TypeScript type checking
• pnpm lint - Lint and fix code
• pnpm format - Format code with Prettier

License

[Add your license here]