@maz-ui/nuxt

✨ The Ultimate Nuxt Module for Beautiful Vue.js Components ✨

Transform your Nuxt application with Maz-UI - a comprehensive Vue.js component library that makes building beautiful interfaces effortless!


What is Maz-UI?

Maz-UI is a powerful Vue.js component library with 50+ beautiful components, 20+ useful composables, and smart directives that work perfectly with Nuxt. Think of it as your design system in a box!

$3

- Zero Configuration - Works instantly with sensible defaults
- Beautiful by Default - Professional design with dark mode included
- Everything Auto-Imported - No more import statements needed
- Super Fast - Optimized for performance with tree-shaking
- Developer Friendly - TypeScript support and great DevTools
- Production Ready - Perfect SSR/SSG support

Quick Start (2 minutes!)

$3

``bash


Choose your package manager

npm install @maz-ui/nuxt

or

pnpm add @maz-ui/nuxt

or

yarn add @maz-ui/nuxt
`

$3

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

That's it! 🎉 All components, composables, and features are now available in your app!

$3

`vue



`

What You Get Out of the Box

$3

- Buttons: MazBtn,
- Forms: MazInput, MazSelect, MazCheckbox, MazRadio, MazTextarea, MazInputPhoneNumber
- Overlay: MazDropdown, MazPopover
- Navigation: MazTabs, MazStepper, MazPagination
- Data Display: MazTable, MazCard, MazBadge, MazAvatar
- Media: MazCarousel, MazGallery, MazLazyImg
- Feedback: MazDialog, MazToast, MazSpinner, MazLoadingBar
- Charts: MazChart (with Chart.js integration)
- And 30+ more!

$3

- useTheme() - Theme management and dark mode
- useToast() - Beautiful toast notifications
- useDialog() - Modal dialogs made easy
- useAos() - Smooth scroll animations
- useTimer() - Countdown and timer functionality
- useWindowSize() - Reactive window dimensions
- useBreakpoints() - Responsive design helpers
- And many more!

$3

- v-tooltip - Beautiful tooltips anywhere
- v-lazy-img - Lazy load images automatically
- v-zoom-img - Click to zoom images
- v-click-outside - Detect outside clicks
- v-fullscreen-img - Fullscreen image viewer

Theming Made Simple

Maz-UI comes with a powerful theming system that makes your app look professional instantly:

`vue



`

Built-in themes: mazUi, ocean, pristine, obsidian + create your own!

Configuration Options

`ts
// 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: 'hybrid', // 'runtime' | 'buildtime' | 'hybrid'
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
},

// 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,
},
},
})
`

Advanced Features

$3

`ts
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
},
},
})
`

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

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

SSR/SSG Support

This module is built specifically for Nuxt with perfect SSR and SSG support:

- ✅ Server-Side Rendering - Components render perfectly on the server
- ✅ Static Site Generation - Works great with nuxt generate`
- ✅ Hydration - Smooth client-side takeover
- ✅ Theme Persistence - Dark mode preference remembered
- ✅ No FOUC - Flash of unstyled content prevented

Why This Module vs Manual Setup?

| Feature | Manual Setup | @maz-ui/nuxt Module |
| ---------------- | --------------------- | ----------------------------- |
| Setup Time | 30+ minutes | 2 minutes |
| Auto Imports | Manual imports needed | ✅ Everything auto-imported |
| SSR Support | Complex configuration | ✅ Works out of the box |
| Theme System | Manual CSS management | ✅ Automatic theme switching |
| Bundle Size | Full library imported | ✅ Tree-shaking optimized |
| DevTools | No integration | ✅ Nuxt DevTools support |
| TypeScript | Manual type setup | ✅ Perfect TypeScript support |

Learn More

- Full Documentation
- Report Issues
- Discussions

Contributing

We love contributions! Check out our Contributing Guide.

License

MIT License © 2025 LouisMazel

---