Usage

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:

<template>
  <div>
    <MeButton variant="primary">Click me</MeButton>
  </div>
</template>

<script setup>
import { Button } from '@mercadoeletronico/eds-next'
</script>

Component Registration

Global Registration

Register components globally for use throughout your application:

import { createApp } from 'vue'
import { Button } from '@mercadoeletronico/eds-next'

const app = createApp(App)

app.component('MeButton', Button)

Local Registration

Register components locally in specific components:

<script setup>
import { Button } from '@mercadoeletronico/eds-next'
</script>

<template>
  <Button variant="primary">Local Button</Button>
</template>

TypeScript Support

The library provides full TypeScript support with proper type definitions:

<script setup lang="ts">
import { Button, type ButtonProps } from '@mercadoeletronico/eds-next'

const buttonProps: ButtonProps = {
  variant: 'primary',
  size: 'md',
  disabled: false
}
</script>

<template>
  <Button v-bind="buttonProps">Typed Button</Button>
</template>

Event Handling

Handle component events using Vue's event system:

<template>
  <MeButton @click="handleClick">Click me</MeButton>
</template>

<script setup>
const handleClick = (event: MouseEvent) => {
  console.log('Button clicked!', event)
}
</script>

Styling and Customization

Components use Tailwind CSS classes and can be customized using the customVariant prop or by overriding CSS classes:

<template>
  <MeButton custom-variant="bg-purple-500 hover:bg-purple-600">
    Custom Button
  </MeButton>
</template>

Best Practices

1. Use TypeScript: Take advantage of the built-in type definitions
2. Component Names: Use consistent naming conventions (e.g., MeButton)
3. Props Validation: Leverage TypeScript for prop validation
4. Event Handling: Use proper event typing for better development experience

Next Steps

• Components - Explore all available components
• Button Component - Detailed Button documentation