Learn how to use EletroDS Vue 3 components in your application.
After installation, you can start using the components in your Vue templates:
<template>
<div>
<MeButton color="primary">Click me</MeButton>
</div>
</template>
<script setup>
import { MeButton } from '@mercadoeletronico/eds-next'
</script>
Register components globally for use throughout your application:
import { createApp } from 'vue'
import { MeButton } from '@mercadoeletronico/eds-next'
const app = createApp(App)
app.component('MeButton', MeButton)
Register components locally in specific components:
<script setup>
import { MeButton } from '@mercadoeletronico/eds-next'
</script>
<template>
<MeButton color="primary">Local Button</MeButton>
</template>
The library provides full TypeScript support with proper type definitions:
<script setup lang="ts">
import { MeButton, type ButtonProps } from '@mercadoeletronico/eds-next'
const buttonProps: ButtonProps = {
color: 'primary',
size: 'md',
disabled: false
}
</script>
<template>
<MeButton v-bind="buttonProps">Typed Button</MeButton>
</template>
Handle component events using Vue's event system:
<template>
<MeButton @click="handleClick">Click me</MeButton>
</template>
<script setup lang="ts">
const handleClick = (event: MouseEvent) => {
console.log('Button clicked!', event)
}
</script>
Components use Tailwind CSS classes and can be customized using the class prop:
<template>
<MeButton class="font-bold rounded-full">
Custom Button
</MeButton>
</template>
You can also use the ui prop to override specific slots:
<template>
<MeButton :ui="{ base: 'shadow-lg' }">
Styled Button
</MeButton>
</template>
MeButton)EletroDS uses a semantic color system:
| Color | Usage |
|---|---|
primary | Primary brand actions |
secondary | Secondary actions |
success | Success states and confirmations |
warning | Warning states |
error | Error states and destructive actions |
info | Informational elements |
neutral | Neutral elements |
Components support consistent sizing:
| Size | Description |
|---|---|
xs | Extra small |
sm | Small |
md | Medium (default) |
lg | Large |
xl | Extra large |