@takuhii/bricks-nuxt

Nuxt 3 module for zero-config integration of the Bricks design system.

Installation

pnpm add @takuhii/bricks-nuxt @takuhii/bricks-core

Usage

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@takuhii/bricks-nuxt'],
  bricks: {
    theme: 'default',
  },
});

That's it. All W* components are available globally in templates without imports.

What it does

1. Registers all Bricks components globally — SSR-safe, no CSS-in-JS issues
2. Injects stylesheets — reset, styleguide, and theme CSS in the correct order
3. Provides theme CSS variables — :root variables for the selected brand
4. Transpiles @takuhii/bricks-core — ensures Vite processes it correctly
5. Auto-imports composables — usePrice, useCarousel, useCloudinaryConfig, provideCloudinaryConfig
6. Adds component types — template intellisense for all W* components

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | theme | 'default' | 'default' | Brand theme to apply | | globalComponents | boolean | true | Register all components globally | | composables | boolean | true | Auto-import composables |

Adding new components

When a new component is added to @takuhii/bricks-core, regenerate the plugin:

# Ensure core is built first
pnpm --filter @takuhii/bricks-core run build

# Regenerate the plugin and type declarations
node packages/nuxt/scripts/generate-plugin.mjs

Development

# Build the module
pnpm --filter @takuhii/bricks-nuxt run build