Getting Started
Usage
Learn how to use EletroDS Vue 3 components in your application.
Learn how to use EletroDS Vue 3 components in your application.
Basic Usage
After installation, you can start using the components in your Vue templates:
App.vue
<template>
<div>
<MeButton color="primary">Click me</MeButton>
</div>
</template>
<script setup>
import { MeButton } from '@mercadoeletronico/eds-next'
</script>
Component Registration
Global Registration
Register components globally for use throughout your application:
main.ts
import { createApp } from 'vue'
import { MeButton } from '@mercadoeletronico/eds-next'
const app = createApp(App)
app.component('MeButton', MeButton)
Local Registration
Register components locally in specific components:
MyComponent.vue
<script setup>
import { MeButton } from '@mercadoeletronico/eds-next'
</script>
<template>
<MeButton color="primary">Local Button</MeButton>
</template>
TypeScript Support
The library provides full TypeScript support with proper type definitions:
TypedButton.vue
<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>
Event Handling
Handle component events using Vue's event system:
EventHandling.vue
<template>
<MeButton @click="handleClick">Click me</MeButton>
</template>
<script setup lang="ts">
const handleClick = (event: MouseEvent) => {
console.log('Button clicked!', event)
}
</script>
Styling and Customization
Components use Tailwind CSS classes and can be customized using the class prop:
CustomButton.vue
<template>
<MeButton class="font-bold rounded-full">
Custom Button
</MeButton>
</template>
You can also use the ui prop to override specific slots:
UiPropButton.vue
<template>
<MeButton :ui="{ base: 'shadow-lg' }">
Styled Button
</MeButton>
</template>
Best Practices
- Use TypeScript: Take advantage of the built-in type definitions
- Component Names: Use consistent naming conventions (e.g.,
MeButton) - Props Validation: Leverage TypeScript for prop validation
- Event Handling: Use proper event typing for better development experience
Color System
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 |
Size System
Components support consistent sizing:
| Size | Description |
|---|---|
xs | Extra small |
sm | Small |
md | Medium (default) |
lg | Large |
xl | Extra large |