# Choose your package manager
npm install @maz-ui/nuxt
# or
pnpm add @maz-ui/nuxt
# or
yarn add @maz-ui/nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@maz-ui/nuxt'],
})

<script setup>
// All composables are auto-imported too!
const toast = useToast()
const { isDark, toggleDarkMode } = useTheme()

function showMessage() {
  toast.success('Welcome to Maz-UI! 🎉')
}
</script>

<template>
  <div>
    <!-- All components are auto-imported! -->
    <MazBtn color="primary" @click="showMessage">
      Click me!
    </MazBtn>

    <!-- Composables work everywhere -->
    <MazCard class="mt-4">
      <h2>Welcome to Maz-UI!</h2>
      <p>Current theme: {{ isDark ? 'Dark' : 'Light' }}</p>
    </MazCard>

    <!-- Directives are ready to use -->
    <div v-tooltip="'Hello World!'">
      Hover me for tooltip
    </div>
  </div>
</template>

<script setup>
// Switch between built-in themes
const { updateTheme, toggleDarkMode } = useTheme()

async function changeToOceanTheme() {
  const { ocean } = await import('@maz-ui/themes')
  updateTheme(ocean)
}
</script>

<template>
  <div>
    <MazBtn @click="toggleDarkMode">
      🌙 Toggle Dark Mode
    </MazBtn>

    <MazBtn @click="changeToOceanTheme">
      🌊 Ocean Theme
    </MazBtn>
  </div>
</template>

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@maz-ui/nuxt'],
  mazUi: {
    // General Settings
    general: {
      autoImportPrefix: 'Maz', // useMazToast instead of useToast
      defaultMazIconPath: '/icons', // Path to your SVG icons
      devtools: true, // Enable DevTools integration
    },

    // Theme System
    theme: {
      preset: 'ocean', // Choose: 'mazUi', 'ocean', 'pristine', 'obsidian'
      strategy: 'runtime', // 'runtime' | 'buildtime'
      darkModeStrategy: 'class', // 'class' | 'media' | 'auto'
    },

    // Translations
    translations: {
      locale: 'fr', // Default language
      fallbackLocale: 'en',
    },

    // Components (all enabled by default)
    components: {
      autoImport: true, // Auto-import all components globally
    },

    // Global component defaults (instance prop > defaults[Component] > defaults.global > library default)
    defaults: {
      global: { roundedSize: 'lg' }, // cross-cutting (roundedSize, size)
      MazBtn: { roundedSize: 'full' }, // per-component, wins over global
      MazCard: { bordered: false, elevation: true },
    },

    // Composables (customize what you need)
    composables: {
      useTheme: true,
      useToast: true,
      useDialog: true,
      useAos: {
        injectCss: true, // Include AOS animations CSS
        router: true, // Re-trigger on route change
      },
      // ... all others enabled by default
    },

    // Directives
    directives: {
      vTooltip: true,
      vLazyImg: { threshold: 0.1 }, // Custom intersection threshold
      vClickOutside: true,
      vFullscreenImg: true,
      vZoomImg: true,
    },

    // AI coding agents (default: { rules: false, mcp: true }, false to disable)
    // In development, registers the maz-ui MCP server in the configs of the detected agents
    // (.mcp.json, .cursor/mcp.json, .vscode/mcp.json), rules: true also writes .claude/rules/maz-ui.md and an AGENTS.md section
    // In a monorepo, the files go to the root of the workspace (dir: '<folder>' to change it)
    agents: { rules: false, mcp: true },
  },
})

import { definePreset } from '@maz-ui/themes'
// themes/my-theme.ts
export const myCustomTheme = definePreset({
  base: 'maz-ui',
  overrides: {
    colors: {
      primary: '350 100% 50%',
      secondary: '350 14% 96%',
      background: '0 0% 100%',
      // ... more colors
    },
  },
})

// nuxt.config.ts
import { myCustomTheme } from './themes/my-theme'

export default defineNuxtConfig({
  modules: ['@maz-ui/nuxt'],
  mazUi: {
    theme: {
      preset: myCustomTheme,
    },
  },
})