mechtaui v3.20.0
Get Started
This guide will help you to start working with MechtaUI ❤️🔥
On this page
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>
Links
🚀 Team Credits:
🎨 Designers
- Azamat Zhumabek - @azamat_zhumabek (TG)
- Amila - @amila_uu (TG)
💻 Development Team
- Vladislav Borovkov (Frontend Developer) - @john_folker (TG)
- Demezhan Kazhkenov (Frontend Lead) - @dropdead616 (TG)
Crafted with ❤️ by our amazing team!
4 months ago
8 months ago
5 months ago
5 months ago
6 months ago
7 months ago
4 months ago
5 months ago
8 months ago
6 months ago
7 months ago
8 months ago
6 months ago
7 months ago
8 months ago
7 months ago
8 months ago
6 months ago
6 months ago
9 months ago
9 months ago
9 months ago
5 months ago
6 months ago
8 months ago
5 months ago
7 months ago
8 months ago
7 months ago
8 months ago
5 months ago
7 months ago
8 months ago
5 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
6 months ago
7 months ago
6 months ago
8 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
10 months ago
11 months ago
10 months ago
11 months ago
11 months ago
11 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
9 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago