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>
<MeInput color="primary" placeholder="Type here..." />
</div>
</template>
<script setup>
import { MeInput } from '@mercadoeletronico/eds-next'
</script>
Component Registration
Global Registration
Register components globally for use throughout your application:
main.ts
import { createApp } from 'vue'
import { MeInput } from '@mercadoeletronico/eds-next'
const app = createApp(App)
app.component('MeInput', MeInput)
Local Registration
Register components locally in specific components:
MyComponent.vue
<script setup>
import { MeInput } from '@mercadoeletronico/eds-next'
</script>
<template>
<MeInput color="primary" placeholder="Local Input" />
</template>
TypeScript Support
The library provides full TypeScript support with proper type definitions:
TypedInput.vue
<script setup lang="ts">
import { MeInput, type InputProps } from '@mercadoeletronico/eds-next'
const inputProps: InputProps = {
color: 'primary',
size: 'md',
disabled: false
}
</script>
<template>
<MeInput v-bind="inputProps" placeholder="Typed Input" />
</template>
Event Handling
Handle component events using Vue's event system:
EventHandling.vue
<template>
<MeInput @change="handleChange" placeholder="Type here..." />
</template>
<script setup lang="ts">
const handleChange = (event: Event) => {
console.log('Input changed!', event)
}
</script>
Styling and Customization
Components use Tailwind CSS classes and can be customized using the class prop:
CustomInput.vue
<template>
<MeInput class="font-bold rounded-full" placeholder="Custom Input" />
</template>
You can also use the ui prop to override specific slots:
UiPropInput.vue
<template>
<MeInput :ui="{ base: 'shadow-lg' }" placeholder="Styled Input" />
</template>
Best Practices
- Use TypeScript: Take advantage of the built-in type definitions
- Component Names: Use consistent naming conventions (e.g.,
MeInput) - 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 |