Skip to content

Como criar uma nova camada Nuxt ​

@fc/base ​

Camada raiz do monorepo — fornece o runtime config básico compartilhado por todas as apps Nuxt.

Esta camada contém apenas o mínimo necessário: configuração de runtime, variáveis de ambiente e definições de build comuns. Toda a infraestrutura visual (Quasar, Pinia, VueUse, componentes) está na camada @fc/base-ui.

Recursos herdados ​

A camada oferece a configuração Nuxt mínima, identificação do ambiente, logging, resolução de serviços compartilhados e um health check isolado por aplicação. O endpoint público /info fica centralizado no portal @fc/pdpj.

Serviços internos ​

A camada base centraliza a resolução server-only de serviços do monorepo. Consumidores chamam obterUrlServicoInterno(servico) e não leem a topologia diretamente. Configurações inválidas falham de modo explícito, em vez de cair silenciosamente em outro destino.

Ambiente de execução ​

A camada base também centraliza a leitura do ambiente declarado. Use obterInfoAmbienteExecucao() em código Nuxt e evite inferir o ambiente real apenas pelo modo técnico do build, pois uma imagem de produção pode ser executada em diferentes destinos.

Posição na hierarquia ​

graph TD
  base["<b>base ← esta camada</b>"] --> base-ui["base-ui (Quasar, Pinia, VueUse, componentes compartilhados)"]
  base-ui --> base-servicos["base-servicos (autenticação JWT/JWK + serviços internos)"]
  base-servicos --> base-online["base-online → base-calculadora → base-prev → calculadoras"]
  base --> base-api["base-api → prev-api, rmi-api, mcp"]
  base-ui --> docs-api["docs-api"]

Apps API (prev-api, rmi-api e mcp) estendem diretamente base-api, que por sua vez estende base; elas não precisam da camada visual.

Como criar uma nova camada ou app ​

A técnica das "camadas" (~herança) evita duplicação de código e permite que correções e aperfeiçoamentos nas funcionalidades comuns sejam feitos em um único lugar.

Para aprofundar, veja: Authoring Nuxt Layers.

Criando uma nova app (calculadora) ​

  1. Criar um diretório em apps/ com a estrutura Nuxt padrão.

  2. Criar nuxt.config.ts estendendo a camada desejada:

typescript
import { createResolver } from '@nuxt/kit'

const { resolve } = createResolver(import.meta.url)

export default defineNuxtConfig({
  extends: [
    '../base-prev',  // para calculadoras previdenciárias
  ],
  alias: {
    '@minha-app-layer': resolve('./'),
  },
})

A identificação operacional e os valores que mudam entre ambientes devem ser declarados conforme o catálogo interno de implantação, sem serem duplicados nesta superfície pública.

  1. Criar app.config.ts com as propriedades da app:
typescript
import { name, version } from '../package.json'

export default defineAppConfig({
  nome: name,
  titulo: 'Título da Calculadora',
  descricao: 'Descrição curta da calculadora.',
  versao: version,
  tema: {
    corPrimaria: 'blue',
    barras: {
      fundo: 'blue-9',
      texto: 'white',
    },
  },
})
  1. Importar das camadas usando os aliases:
typescript
import { x, y } from '@base-ui/app/composables'
import { a, b } from '@base-prev/app/composables'
import type { T } from '@app/components'
  1. Para integrar na esteira de publicação, ajustar sites.json no serviço @fc/publicacao.

Referência ​