@poupe/nuxt

@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

npm install @poupe/nuxt @poupe/vue @poupe/theme-builder
# or
yarn add @poupe/nuxt @poupe/vue @poupe/theme-builder
# or
pnpm add @poupe/nuxt @poupe/vue @poupe/theme-builder

Setup

Add the module to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    '@poupe/nuxt'
  ],
  poupe: {
    // Configuration options
    theme: {
      colors: {
        primary: '#1976d2',
        secondary: '#9c27b0',
        // Add more colors as needed
      }
    }
  }
})

Configuration Options

Theme Configuration

export default defineNuxtConfig({
  modules: ['@poupe/nuxt'],
  poupe: {
    theme: {
      colors: {
        primary: '#1976d2',
        secondary: '#9c27b0',
        // Other colors
      },
      // Other theme options
      spacing: {
        // Custom spacing
      },
      borderRadius: {
        // Custom border radius
      }
    },
    // Enable/disable dark mode
    darkMode: true,
    // Component options
    components: {
      prefix: 'P', // Default prefix for components
      // Component-specific options
    }
  }
})

Using Components

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

<template>
  <div>
    <PButton>Click me</PButton>
    <PCard>
      <h2>Card Title</h2>
      <p>Card content</p>
    </PCard>
  </div>
</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 ^4.0.0
• Node.js >=20.19.1
• @poupe/theme-builder ^0.7.0
• @poupe/vue ^0.4.1

License

MIT licensed.