components/
  ProductCard.vue     → <ProductCard />
  shop/
    ProductList.vue   → <ShopProductList />

# Criar novo projeto Nuxt 3
npx nuxi@latest init megashop

# Ou com gerenciador de pacotes específico
npx nuxi@latest init megashop --packageManager pnpm

# Passo 1: Criar projeto
npx nuxi@latest init megashop

# Passo 2: Entrar no diretório do projeto
cd megashop

# Passo 3: Instalar dependências
npm install

# Passo 4: Iniciar servidor de desenvolvimento
npm run dev
# → Servidor dev do Nuxt rodando em http://localhost:3000

# Comando executado com sucesso

{
  "name": "megashop",
  "private": true,
  "scripts": {
    "build": "nuxi build",
    "dev": "nuxi dev",
    "generate": "nuxi generate",
    "preview": "nuxi preview",
    "postinstall": "nuxi prepare"
  },
  "dependencies": {
    "nuxt": "^3.12.0"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest"
  }
}

{
  "name": "megashop",
  "private": true,
  "scripts": {
    "build": "nuxi build",
    "dev": "nuxi dev",
    "generate": "nuxi generate",
    "preview": "nuxi preview",
    "postinstall": "nuxi prepare"
  },
  "dependencies": {
    "nuxt": "^3.12.0"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest"
  }
}

megashop/
├── app.vue                    # Componente raiz
├── nuxt.config.ts             # Config do projeto
├── pages/
│   ├── index.vue              # Homepage
│   ├── products/
│   │   ├── index.vue          # Lista de produtos
│   │   └── [id].vue           # Detalhe do produto
│   ├── categories/
│   │   └── [slug].vue         # Página de categoria
│   ├── cart.vue               # Carrinho de compras
│   └── about.vue              # Página Sobre
├── components/
│   ├── AppHeader.vue          # → <AppHeader />
│   ├── AppFooter.vue          # → <AppFooter />
│   └── product/
│       ├── ProductCard.vue    # → <ProductProductCard /> ①
│       └── ProductList.vue    # → <ProductProductList /> ①
├── composables/
│   ├── useCart.ts             # → auto-importado
│   └── usePriceFormat.ts      # → auto-importado
├── server/
│   └── api/
│       ├── products/
│       │   └── index.get.ts   # GET /api/products
│       └── cart/
│           └── index.post.ts  # POST /api/cart
├── layouts/
│   ├── default.vue            # Layout padrão
│   └── sidebar.vue            # Layout com sidebar
├── middleware/
│   └── auth.ts                # Middleware nomeado
├── plugins/
│   └── stripe.client.ts       # Plugin apenas no cliente
├── assets/
│   └── css/
│       └── main.css           # Estilos globais
└── public/
    ├── favicon.ico
    └── robots.txt

Execução Bem-sucedida

// nuxt.config.ts
export default defineNuxtConfig({
  // Configuração SSR global
  ssr: true,

  // Metadados do app
  app: {
    head: {
      title: 'MegaShop - E-Commerce Premium',
      meta: [
        { name: 'description', content: 'Milhões de produtos, entregues mundialmente' }
      ]
    }
  },

  // Config de runtime (segredos apenas no servidor)
  runtimeConfig: {
    // Privado - apenas servidor
    databaseUrl: process.env.DATABASE_URL,
    stripeSecretKey: process.env.STRIPE_SECRET_KEY,
    // Público - exposto ao cliente
    public: {
      apiBase: process.env.API_BASE || 'http://localhost:3000/api',
      stripePublishableKey: process.env.STRIPE_PUBLISHABLE_KEY
    }
  },

  // Módulos
  modules: [
    '@pinia/nuxt',
    '@nuxtjs/tailwindcss'
  ],

  // Configuração de prefixo de caminho de componentes
  components: [
    { path: '~/components', pathPrefix: false }
  ]
})

// Execução Bem-sucedida

// nuxt.config.ts - regras de renderização por rota
export default defineNuxtConfig({
  routeRules: {
    // Homepage: pré-renderizar no momento do build
    '/': { prerender: true },
    // Lista de produtos: ISR com revalidação de 60s
    '/products': { swr: 60 },
    // Detalhe do produto: ISR com revalidação de 3600s
    '/products/**': { swr: 3600 },
    // Painel admin: apenas no cliente
    '/admin/**': { ssr: false },
    // API: headers CORS
    '/api/**': { cors: true }
  }
})

// Execução Bem-sucedida

// composables/usePriceFormat.ts
// Não é necessário importar - auto-importado pelo Nuxt
export function usePriceFormat(price: number, currency: string = 'USD'): string {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency
  }).format(price)
}

// Em qualquer componente - usar diretamente
// const formatted = usePriceFormat(2999.99) → "$2,999.99"

// Execução Bem-sucedida

<!-- pages/index.vue -->
<template>
  <!-- Todos os componentes auto-importados, sem necessidade de declaração import -->
  <div>
    <AppHeader />
    <ProductCard :product="featured" />
    <AppFooter />
  </div>
</template>

<script setup lang="ts">
// Todos os composables auto-importados
const { data: featured } = await useFetch('/api/products/featured')
const price = usePriceFormat(featured.value?.price || 0)
</script>

// Execução Bem-sucedida

# ============================================
# Inicialização do Projeto MegaShop
# Configuração completa do zero até o servidor dev rodando
# ============================================

# 1. Criar projeto
npx nuxi@latest init megashop
cd megashop

# 2. Instalar dependências core
npm install @pinia/nuxt @nuxtjs/tailwindcss

# 3. Criar estrutura de diretórios
mkdir -p pages/products pages/categories
mkdir -p components/product
mkdir -p composables
mkdir -p server/api/products server/api/cart
mkdir -p layouts
mkdir -p middleware
mkdir -p plugins
mkdir -p assets/css
mkdir -p public

# 4. Inicializar repositório Git
git init
git add .
git commit -m "feat: initialize MegaShop with Nuxt 3"

# 5. Iniciar servidor de desenvolvimento
npm run dev