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:

npm install @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 | object	true	Enable Pixel client-side plugin, or an object to enable with custom options
postcss	object	{}	PostCSS plugin configuration

Plugin Configuration

When plugin is enabled, the Pixel client-side plugin is installed automatically with sensible defaults. No additional configuration is required.

To override the default behavior, pass a configuration object to plugin inside mekariPixel:

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

  mekariPixel: {
    plugin: {
      pixelTheme: true,
      toastManager: true,
      tooltipDirective: true,
      maskDirective: false,
      hideVersion: true
    }
  }
})

Plugin Options

Option	Type	Default	Description
pixelTheme	boolean	true	Activate the theme watcher for dynamic theme switching
toastManager	boolean	true	Mount the global MpToastManager instance
tooltipDirective	boolean	true	Register v-tooltip directive globally
maskDirective	boolean	true	Register v-mask directive globally
hideVersion	boolean	false	Prevent exposing the Pixel version via window.__PIXEL3__

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
      ]
    }
  }
})