maz-ui icon indicating copy to clipboard operation
maz-ui copied to clipboard

Vue & Nuxt library of standalone components & tools to build interfaces

maz-ui

vue 3 nuxt 3

npm license Downloads

maintainability test_coverage

bundlephobia_tree bundlephobia_zip bundlephobia_zip

Maz-ui is a standalone components library and tools for Vue.JS & Nuxt.JS (v3.x)

Documentation & Components

Documentation & Components

Install

Getting Started

npm install maz-ui

# Or yarn add maz-ui

Import necessary CSS file

In the main.js or main.ts, import these files.

import "maz-ui/css/main.css";

Recommanded

To optimize your bundle size, it's recommanded to use the partial import

Global component installation (recommanded)

Example with some components

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

const app = createApp(App)

...
app.component('MazBtn', MazBtn)
app.component('MazInput', MazInput)
app.component('MazPhoneNumberInput', MazPhoneNumberInput)
...

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>

Not recommanded

Fully library installation

import { createApp } from "vue";
import components from "maz-ui/components";
import "maz-ui/css/main.css";

const app = createApp(App);

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

Contributing

Please follow this documentation

LICENSE

MIT