Templates

Pré-Pedido

Pre-order document pages — creation as a single progressive-unlock flow, edit and read on the MeDocument chassis. One registry item per mode.

Overview

The three screens of a Pré-Pedido, the first real document type built at Mercado Eletrônico on top of MeDocument. The field content is grounded in a real extraction of the legacy ASP screens (WFPrePedFormalizacao.asp, CarrinhoCompras.asp, verPrepedidoWF.asp, supplier/search) rather than invented names.

Edit and read are thin pages over the Documentos chassis, driven entirely by data: every field is a DocumentField (a value renders as plain text, a type + config renders the matching input), grouped into DocumentFormSection/DocumentFormSubsection. Creation is the exception — it moved off the chassis, see below.

Unlike a component or block, these are not meant to be reused as-is — they ship with static, mock data as a realistic starting point. See Templates for what that distinction means.

Create

A single page built on MeLayout, MeHeader, MeDocumentToolbar, MeCardView, MeListView and MeTable. It deliberately does not use the MeDocument chassis: the chassis renders every section at once, and creation needs them to open in order. Sections (Categoria + Catálogo → Itens do Pedido → Fornecedor → Parâmetros → Documento) unlock in place as the previous one is completed, so the buyer never leaves the page — replacing the ~7 page navigations the legacy journey takes.

Edit

The chassis in edit mode, fed an already-filled payload. Every section (Parâmetros da Requisição, Dados do Pedido, Itens and, when the payload asks for it, Rateio) is on the page at once: editing an existing document has nothing to walk the user through. Create and edit share every branch inside the chassis — only the initial payload differs (empty vs already filled) — which is why editing is a thin page while creating is its own flow.

Read

The same field schema as edit, rendered as plain text, plus the supplier and address cards above the section tabs.

These ship with static, mock data — no API wiring. Replace document, the payload model and (on create) FORNECEDORES and the catalog items with your own data source when you adopt the pattern in a real page.

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.

Each mode is its own registry item, so the item name ends in the mode itself — eject only the screen you need instead of pulling all three.

npx shadcn-vue@latest add @mercadoeletronico/pre-order-create
npx shadcn-vue@latest add @mercadoeletronico/pre-order-edit
npx shadcn-vue@latest add @mercadoeletronico/pre-order-read

Each one lands at ~/pages/pre-order-<mode>.vue — move it into app/pages/ if your project uses the Nuxt 4 app/ convention. Unlike Document, which ejects the chassis as a registry:block for you to wire into your own pages, these are registry:page items: a whole screen, ready to run.