chrisalexqm / maz-ui Goto Github PK

View Code? Open in Web Editor NEW

This project forked from louismazel/maz-ui

Stand-alone components library to build your interfaces with Vue.JS & Nuxt.JS

License: MIT License

Shell 0.05% JavaScript 4.74% TypeScript 18.45% CSS 20.21% Makefile 0.60% HTML 0.06% Vue 54.19% SCSS 1.70%

maz-ui's Introduction

maz-ui

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

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);
});