Installation

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

Package Manager

Install using pnpm (recommended):

pnpm add @mercadoeletronico/eds-next

Or using npm:

npm install @mercadoeletronico/eds-next

Or using yarn:

yarn add @mercadoeletronico/eds-next

Requirements

• Node.js: >= 22.12.0
• pnpm: >= 8.0.0 (recommended)
• Vue: ^3.5.13

Setup

1. Import Components

Import the components you need:

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

2. Register Components

Register components globally in your Vue app:

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

const app = createApp(App)

app.component('MeButton', Button)

app.mount('#app')

3. Import Styles

The components come with built-in styles, but you may need to import the main CSS file:

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

Tailwind CSS Configuration

If you're using Tailwind CSS in your project, make sure to configure it properly to work with the design system components.

TypeScript Configuration

For TypeScript projects, the package includes type definitions. Make sure your tsconfig.json includes the necessary configuration:

{
  "compilerOptions": {
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

Next Steps

• Usage Guide - Learn how to use the components
• Components - Explore all available components