Templates

Transações

Transactions list page — header, side navigation, filter bar, and a paginated table with status badges.

Overview

A full transactions list screen, built from existing EletroDS blocks and components: MeLayout as the shell, MeHeader for top navigation, MeSubheader for page actions, MeFilterBar for filtering, and MeTableView for the data grid.

Unlike a component or block, this is not meant to be reused as-is — it ships with static, mock data as a realistic starting point for building your own transactions-style screen. See Templates for what that distinction means.

Ejecting

If this is the first thing you're ejecting into this project, do the one-time setup first — with default init flags, shadcn-vue installs its own base theme (unused CSS variables like --border/--background) that no eds-next component reads and that breaks the Tailwind v4 build with a border-border utility error. The --no-base-style flag skips that entirely.

npx shadcn-vue@latest add @mercadoeletronico/transactions

This ejects a single file: the page imports MeLayout, MeHeader, MeSubheader, MeFilterBar, and MeTableView from @mercadoeletronico/eds-next directly, so the CLI adds that package (and @nuxt/ui, @tanstack/vue-table) as an npm dependency instead of cascading each block as its own registryDependencies entry the way ejecting login cascades login-form.

The page lands at ~/pages/transactions.vue — same Nuxt 4 srcDir caveat as theme: move it into app/pages/transactions.vue if your project uses the app/ convention.

This ships with static, mock data — no API wiring. Replace tableData, filterFields, and the sidebar's hardcoded items with your own data source once ejected.