Getting Started

Prerequisites

• Node.js v12+
• Vue 3 or Nuxt 3

Installation

npm install maz-ui
# or pnpm add maz-ui
# or yarn add maz-ui

Vue JS

In the main.js or main.ts, import main maz-ui CSS file before your own CSS

import 'maz-ui/styles' // or import 'maz-ui/css/main.css'
import '@/css/path_to_your_main_file.css'

Nuxt JS

A Nuxt Module is available to install the library. Take advantage of the automatic import of CSS files, components, composables and plugins.

Follow the Nuxt Module Documentation and see options

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

Recommendations

TIP

Use unplugin-vue-components and the dedicated maz-ui resolver to auto-import components, directives and modules

// vite.config.mts

import Components from 'unplugin-vue-components/vite'
import { UnpluginVueComponentsResolver, UnpluginDirectivesResolver, UnpluginModulesResolver } from 'maz-ui/resolvers'

export default defineConfig({
  plugins: [
    Components({
      dts: true,
      resolvers: [
        UnpluginVueComponentsResolver(),
        UnpluginDirectivesResolver(),
        UnpluginModulesResolver(),
      ],
    }),
  ]
})

Typescript users: Add this in your tsconfig.json

{
  ...
  "include": [
    "components.d.ts",
    "auto-imports.d.ts",
  ],
  ...
}

Then, you don't need to import maz-ui components, directives and modules in your files

<template>
  <MazBtn v-click-outside="clikedOutside">Button</MazBtn>
</template>

<script lang="ts" setup>
const toast = useToast()

toast.message('Hello world!')

function clikedOutside () {
  console.log('clicked outside')
}
</script>

Component import

Import the module chosen directly in your component

<template>
  <MazBtn>Button</MazBtn>
</template>

<script lang="ts" setup>
  import MazBtn from 'maz-ui/components/MazBtn'
</script>

Install components globally

import { createApp } from 'vue'
import MazBtn from 'maz-ui/components/MazBtn'

const app = createApp(App)
app.component('MazBtn', MazBtn)
...

Not recommended - Fully components installation

Before, you have to install all dependencies of components

import { createApp } from 'vue'
import * as components from 'maz-ui/components'
import 'maz-ui/styles' // or import 'maz-ui/css/main.css'

const app = createApp(App)

Object.entries(components).forEach(([componentName, component]) => {
  app.component(componentName, component)
})