Appearance

Como criar uma nova calculadora ​

Este guia descreve os passos para criar uma nova calculadora previdenciária seguindo o padrão estabelecido em apps/prev-tc/.

1 — Criar o diretório da app ​

bash
mkdir apps/minha-calc
cd apps/minha-calc

2 — package.json ​

jsonc
{
  "name": "@fc/minha-calc",
  "type": "module",
  "version": "0.1.0",
  "description": "Descrição da calculadora",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev --port 3099",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "lint:styles": "stylelint 'app/**/*.{vue,css,scss}'"
  },
  "dependencies": {
    "@fc/base-prev": "workspace:*"
  },
  "devDependencies": {
    "nuxt": "catalog:nuxt",
    "typescript": "catalog:ts",
    "vue-tsc": "catalog:ts"
  }
}

Escolha uma porta única não usada por outra app. Veja a lista de portas.

3 — nuxt.config.ts ​

ts
import { fileURLToPath } from 'node:url'
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  extends: ['../base-prev'],

  alias: {
    '@minha-calc-layer': fileURLToPath(new URL('./app', import.meta.url)),
  },
  components: [
    {
      path: fileURLToPath(new URL('./app/components', import.meta.url)),
      pathPrefix: false,
      extensions: ['.vue'],
    },
  ],
})

4 — app/app.config.ts ​

ts
export default defineAppConfig({
  nome: 'minha-calc',
  titulo: 'Nome da Calculadora',
  descricao: 'Descrição curta para o cabeçalho',
  versao: '0.1.0',
  tema: '#1a7a6e',
})

5 — tsconfig.json ​

jsonc
{
  "extends": "./.nuxt/tsconfig.json"
}

6 — stylelint.config.mjs ​

js
import config from '@fc/stylelint-config'
export default config

7 — Estrutura de arquivos da app ​

app/
├── app.config.ts
├── components/
│   └── MinhaCalcPrincipal.vue
├── composables/
│   ├── workers/
│   │   └── calcular.worker.ts    ← lógica de domínio (thread separada)
│   └── useCalcular.ts            ← composable que usa o worker
└── pages/
    └── index.vue

8 — Instalar e rodar ​

bash
# Na raiz do monorepo
pnpm install
pnpm --filter @fc/minha-calc dev

9 — Adicionar ao turbo.json (se necessário) ​

As tasks build, dev, lint, typecheck e test:run são herdadas automaticamente do pipeline global. Só é necessário adicionar tasks customizadas em turbo.json.

Referência ​

  • apps/prev-tc/ — calculadora mais completa, use como referência
  • Camadas Nuxt — detalhes sobre extends, aliases e a camada base-ui
  • Web Workers — padrão criarWorkerScope