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.
Nuxt
With the Nuxt module installed, all components are globally available — no imports required in templates or <script setup>.
MyPage.vue
<template>
<MeSpinner type="border" />
<MeInput placeholder="Type here..." />
</template>
Composables
useI18n and setupI18n are auto-imported by the module:
MyComponent.vue
<script setup lang="ts">
const { t } = useI18n()
</script>
To set the locale, call setupI18n in a plugin:
plugins/i18n.ts
export default defineNuxtPlugin(() => {
setupI18n('pt-BR')
})
TypeScript
Type imports still require an explicit import:
MyComponent.vue
<script setup lang="ts">
import type { InputProps } from '@mercadoeletronico/eds-next'
const props: InputProps = {
color: 'primary',
size: 'md',
}
</script>
Vue
For non-Nuxt applications, import components explicitly.
Basic Usage
App.vue
<template>
<MeInput color="primary" placeholder="Type here..." />
</template>
<script setup lang="ts">
import { MeInput } from '@mercadoeletronico/eds-next'
</script>
i18n
Initialize i18n before mounting the app:
main.ts
import { createApp } from 'vue'
import { setupI18n } from '@mercadoeletronico/eds-next'
import App from './App.vue'
setupI18n('pt-BR')
createApp(App).mount('#app')
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 |
|---|---|
sm | Small |
md | Medium (default) |
lg | Large |