@poupe/nuxt

Nuxt module for integrating Poupe UI framework with theme customization and components.

Features

• 🧩 Easy integration of Poupe UI with Nuxt applications
• 🔄 Auto-imports of Poupe Vue components
• 🎨 Theme customization through Nuxt config
• 🌓 Dark/light mode support with integration to @nuxtjs/color-mode
• 🛠️ TailwindCSS configuration included

Installation

1npm install @poupe/nuxt @poupe/vue @poupe/theme-builder
2# or
3yarn add @poupe/nuxt @poupe/vue @poupe/theme-builder
4# or
5pnpm add @poupe/nuxt @poupe/vue @poupe/theme-builder

Setup

Add the module to your nuxt.config.ts:

1export default defineNuxtConfig({
2  modules: [
3    '@poupe/nuxt'
4  ],
5  poupe: {
6    // Configuration options
7    theme: {
8      colors: {
9        primary: '#1976d2',
10        secondary: '#9c27b0',
11        // Add more colors as needed
12      }
13    }
14  }
15})

Configuration Options

Theme Configuration

1export default defineNuxtConfig({
2  modules: ['@poupe/nuxt'],
3  poupe: {
4    theme: {
5      colors: {
6        primary: '#1976d2',
7        secondary: '#9c27b0',
8        // Other colors
9      },
10      // Other theme options
11      spacing: {
12        // Custom spacing
13      },
14      borderRadius: {
15        // Custom border radius
16      }
17    },
18    // Enable/disable dark mode
19    darkMode: true,
20    // Component options
21    components: {
22      prefix: 'P', // Default prefix for components
23      // Component-specific options
24    }
25  }
26})

Using Components

Once installed, all Poupe components are automatically available in your Nuxt application:

1<template>
2  <div>
3    <PButton>Click me</PButton>
4    <PCard>
5      <h2>Card Title</h2>
6      <p>Card content</p>
7    </PCard>
8  </div>
9</template>

Development

For local development, check out the playground directory.

Related Packages

• @poupe/css - CSS-in-JS utilities
• @poupe/theme-builder - Theme token generation
• @poupe/vue - Vue components library
• @poupe/tailwindcss - TailwindCSS integration

Requirements

• Nuxt ^3.17.2
• Node.js >=20.19.1
• @poupe/theme-builder ^0.7.0
• @poupe/vue ^0.4.1

License

MIT licensed.