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

Setup

1. Import Components

Import the components you need:

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

2. Register Components Globally

Register components globally in your Vue app:

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

const app = createApp(App)

app.component('MeButton', MeButton)

app.mount('#app')

3. Import Styles

The components come with built-in styles. Import the main CSS file:

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

Nuxt Installation

For Nuxt applications, you can use the Nuxt module:

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

This will automatically register all components and import the styles.

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
  }
}

TypeScript Support

EletroDS Vue 3 is built with TypeScript and provides full type definitions. You'll get IntelliSense and type checking out of the box.

import type { ButtonProps } from '@mercadoeletronico/eds-next'

const buttonProps: ButtonProps = {
  color: 'primary',
  size: 'md',
  disabled: false
}

Next Steps