Mechtaui NPM | npm.io

Get Started

This guide will help you to start working with MechtaUI ❤️‍🔥

Introduction

Installation

To install run the following:

pnpm add mechtaui@latest
To import styles, copy & paste this to your main.css file:
import 'mechtaui/dist/style.css'

Autoimport

It's optional, but you can use autoimport components with unplugin-vue-components

pnpm add -D unplugin-vue-components

In order it to work, you need to add custom resolver inside vite.config.ts:

{/* vite.config.ts */}

import Components from 'unplugin-vue-components/vite';

export default defineConfig({
  plugins: [
    Components({
      dts: 'src/components.d.ts',
      resolvers: [
        (componentName) => {
          if (componentName.startsWith('MI')) {
            return {
              name: componentName,
              from: 'mechtaui',
            };
          }
        },
      ],
    })
  ]})

Prefixes

We have main components, filled with logic and ready to use. They are prefixed with MI. And also composite components, that you can use to build your own compositions.

Main Example:

  <MIInput
  v-model="login"
  :is-error="$props.errorStatus"
  :label="$t('auth.login')"
  />

Composite Example:

<template>
   <AccordionRoot
     v-bind="forwarded"
     class="w-full"
     collapsible
   >
     <AccordionItem
       v-for="item in items"
       :key="item.value"
       :value="item.value"
     >
       <AccordionTrigger>{{ item.title }}</AccordionTrigger>
       <AccordionContent>
         {{ item.content }}
       </AccordionContent>
     </AccordionItem>
   </AccordionRoot> 
 </template>

 <script setup lang="ts"> 
 import { AccordionItem, AccordionTrigger, AccordionTrigger, AccordionContent, AccordionRoot } from 'mechtaui';
 </script>