Nuxt Module

Using The Pixel Nuxt module is an official Nuxt integration for the Pixel Design System. It provides seamless integration of components and styles into your Nuxt application with minimal configuration.

Features

• Auto-import Components - Automatically imports all Pixel components (e.g., MpButton, MpInput)
• CSS Integration - Automatically includes Pixel CSS and component-specific styles
• PostCSS Support - Built-in PostCSS plugin configuration for custom styling needs
• Pixel Plugin - Install client-side plugin for additional functionality (e.g tooltip directive)
• TypeScript Support - Full TypeScript types auto-imported for better DX
• Zero Configuration - Works out of the box with sensible defaults
• Nuxt 3 & 4 Compatible - Supports Nuxt 3.0.0 and above

How to Use

Installation

Install the Pixel Nuxt module along with the core Pixel package:

pnpm add @mekari/pixel3 @mekari/pixel3-postcss @mekari/pixel3-nuxt

Usage

Basic Setup

Add the module to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@mekari/pixel3-nuxt']
})

That's it! You can now use Pixel components directly in your templates without importing them:

<template>
  <div>
    <MpButton variant="primary">Click me</MpButton>
    <MpInput placeholder="Enter text" />
  </div>
</template>

Advanced Configuration

Customize the module behavior using the mekariPixel configuration key:

export default defineNuxtConfig({
  modules: ['@mekari/pixel3-nuxt'],

  mekariPixel: {
    // Enable/disable auto-import for components (default: true)
    component: true,

    // Enable/disable Pixel CSS (default: true)
    css: true,

    // Enable/disable Pixel plugin (default: true)
    plugin: true,

    // PostCSS configuration (default: {})
    postcss: {
      // Add your PostCSS plugin options here
    }
  }
})

Configuration Options

Option	Type	Default	Description
component	boolean	true	Enable auto-import for Pixel components
css	boolean	true	Include Pixel CSS stylesheets
plugin	boolean	true	Enable Pixel client-side plugin
postcss	object	{}	PostCSS plugin configuration

Disable Auto-Import

If you prefer manual imports, disable auto-import:

export default defineNuxtConfig({
  modules: ['@mekari/pixel3-nuxt'],

  mekariPixel: {
    component: false
  }
})

Then import components manually:

<template>
  <MpButton>Click me</MpButton>
</template>

<script lang="ts" setup>
  import { MpButton } from '@mekari/pixel3'
</script>

CSS-Only Usage

To use only Pixel styles without components:

export default defineNuxtConfig({
  modules: ['@mekari/pixel3-nuxt'],

  mekariPixel: {
    component: false,
    css: true
  }
})

Custom PostCSS Configuration

Configure PostCSS plugins for Pixel3:

export default defineNuxtConfig({
  modules: ['@mekari/pixel3-nuxt'],

  mekariPixel: {
    postcss: {
      include: [
        './app/**/*.{js,jsx,ts,tsx,vue}' // Nuxt 4 new app directory
      ]
    }
  }
})