Getting Started

Installation

Learn how to install and set up EletroDS Vue 3 in your project.

Package Manager

Install using pnpm (recommended):

Terminal

pnpm add @mercadoeletronico/eds-next

Or using npm:

Terminal

npm install @mercadoeletronico/eds-next

Or using yarn:

Terminal

yarn add @mercadoeletronico/eds-next

Requirements

Dependency	Version
Node.js	>= 22.12.0
pnpm	>= 8.0.0 (recommended)
Vue	^3.5.13

Nuxt Setup

Add the module to your nuxt.config.ts:

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@mercadoeletronico/eds-next/nuxt'
  ]
})

The module automatically:

Registers all Me* components globally — no imports needed in templates
Auto-imports composables like useI18n and setupI18n
Imports the component styles

If you are consuming this package inside a monorepo (before building the dist), reference the source directly instead:

nuxt.config.ts

import { resolve } from 'path'

export default defineNuxtConfig({
  modules: [
    resolve(__dirname, '../packages/ui/app/nuxt/index.ts')
  ]
})

Vue Setup

For non-Nuxt Vue applications, register the components and styles manually.

Import Styles

main.ts

import '@mercadoeletronico/eds-next/style.css'

Register Components

main.ts

import { createApp } from 'vue'
import { MeInput, MeSpinner } from '@mercadoeletronico/eds-next'
import App from './App.vue'

const app = createApp(App)

app.component('MeInput', MeInput)
app.component('MeSpinner', MeSpinner)

app.mount('#app')

Or import locally per component:

MyComponent.vue

<script setup lang="ts">
import { MeInput } from '@mercadoeletronico/eds-next'
</script>

Next Steps

Usage

Learn how to use EletroDS components in your application.

Components

Explore all available components and their documentation.

Contribution

A comprehensive guide on contributing to EletroDS, including project structure, development workflow, and best practices.

Usage

Learn how to use EletroDS Vue 3 components in your application.