Getting Started

Nuxt

Use @dr-max/ui in Nuxt with the bundled module.

The package ships a Nuxt module (Nuxt ≥ 4) that auto-registers every component with the Ui prefix, resolving each one from its route-splittable entry.

Setup

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@dr-max/ui/nuxt'],
  css: ['@dr-max/ui/theme.css'],
})

Usage

Components are available globally with the Ui prefix — no imports needed:

app/pages/index.vue

<template>
  <UiHeading as="h1" variant="display-lg">Vitamins</UiHeading>
  <UiButton variant="primary-green">Add to cart</UiButton>
</template>

Each auto-registered component still resolves from its own entry (@dr-max/ui/button, …), so per-route chunks only include the components and styles that route actually uses.

Icons

Icons are plain named exports and work the same in Nuxt — import what you need:

<script setup lang="ts">
import { iconTip } from '@dr-max/ui/icons'
</script>

<template>
  <UiIcon :icon="iconTip" />
</template>