Getting Started

Introduction

Get started with EletroDS Vue 3, the modern design system for Mercado Eletrônico.

Get started with EletroDS Vue 3, the modern design system for Mercado Eletrônico built with Vue 3 and Tailwind CSS.

What is EletroDS?

EletroDS is a comprehensive design system that provides a unified set of design principles, components, and guidelines to ensure consistency and efficiency across all Mercado Eletrônico digital products.

Vue 3 Composition API

Built with Vue 3 and TypeScript for better type safety, performance, and developer experience with modern reactive patterns.

Tailwind CSS Integration

Utilizes Tailwind CSS for consistent styling, easy customization, and rapid development with utility-first approach.

Interactive Documentation

Live examples with real components, comprehensive API references, and interactive playground for testing components.

TypeScript Support

Full TypeScript support with proper type definitions, IntelliSense, and compile-time error checking for better code quality.

Accessibility First

Built with accessibility in mind, following WCAG guidelines and ensuring all components are usable by everyone.

Testing & Quality

Comprehensive testing suite with unit tests, integration tests, and visual regression testing to ensure reliability.

Key Features

  • Vue 3 Composition API: Modern reactive patterns with better TypeScript support
  • Tailwind CSS: Utility-first styling with easy customization
  • TypeScript: Full type definitions for enhanced developer experience
  • Accessible: WCAG compliant components
  • Tested: Comprehensive test coverage with Vitest and Playwright
  • Nuxt Ready: First-class support for Nuxt applications

Requirements

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

Next Steps

Installation

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

Usage

Learn how to use EletroDS components in your application.

Components

Explore all available components and their documentation.