Nuxt 3 Промпт для начинающих

Браузер → Пустой HTML → Загрузка JS → Рендеринг контента

Браузер → Сервер генерирует HTML → Готовая страница → Гидратация JS

Сборка → Генерация всех HTML → Готовые статические файлы

my-portfolio/
├── 📁 pages/              # Страницы (автоматический роутинг)
│   ├── index.vue          # / (главная)
│   ├── about.vue          # /about
│   └── projects/
│       ├── index.vue      # /projects
│       └── [id].vue       # /projects/123 (динамический роут)
│
├── 📁 components/         # Переиспользуемые компоненты
│   ├── Header.vue         # Автоимпорт, не нужен import!
│   └── ProjectCard.vue
│
├── 📁 layouts/            # Шаблоны страниц
│   ├── default.vue        # Основной лейаут
│   └── minimal.vue        # Альтернативный лейаут
│
├── 📁 composables/        # Переиспользуемая логика
│   └── useProjects.ts     # Автоимпорт!
│
├── 📁 plugins/            # Плагины Vue
│   └── analytics.ts
│
├── 📁 public/             # Статические файлы (доступны напрямую)
│   └── favicon.ico
│
├── 📁 assets/             # Ресурсы для обработки (CSS, изображения)
│   └── styles/
│
├── app.vue                # Корневой компонент
├── nuxt.config.ts         # Конфигурация Nuxt
└── package.json

app.vue → Layout → Page → Components

npx nuxi init my-portfolio
cd my-portfolio

npm install

npm run dev

npm install @nuxt/image

export default defineNuxtConfig({
  devtools: { enabled: true },

  // Для статической генерации (важно для Netlify!)
  ssr: true,

  app: {
    head: {
      title: 'Моё Портфолио',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { name: 'description', content: 'Портфолио веб-разработчика' }
      ],
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
      ]
    }
  },

  modules: ['@nuxt/image'],
})

<template>
  <header class="header">
    <nav>
      <NuxtLink to="/" class="logo">Моё Портфолио</NuxtLink>
      <ul class="nav-links">
        <li><NuxtLink to="/">Главная</NuxtLink></li>
        <li><NuxtLink to="/about">Обо мне</NuxtLink></li>
        <li><NuxtLink to="/projects">Проекты</NuxtLink></li>
        <li><NuxtLink to="/contact">Контакты</NuxtLink></li>
      </ul>
    </nav>
  </header>
</template>

<style scoped>
.header {
  padding: 1rem 2rem;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: #2c3e50;
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: #42b983;
  text-decoration: none;
  transition: color 0.3s;
}

.nav-links a:hover,
.nav-links a.router-link-active {
  color: #2c3e50;
}
</style>

<template>
  <div class="project-card">
    <img :src="project.image" :alt="project.title" />
    <h3>{{ project.title }}</h3>
    <p>{{ project.description }}</p>
    <div class="tags">
      <span v-for="tag in project.tags" :key="tag" class="tag">
        {{ tag }}
      </span>
    </div>
    <NuxtLink :to="`/projects/${project.id}`" class="btn">
      Подробнее
    </NuxtLink>
  </div>
</template>

<script setup>
// Определяем props с TypeScript
const props = defineProps({
  project: {
    type: Object,
    required: true
  }
})
</script>

<style scoped>
.project-card {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

.project-card:hover {
  transform: translateY(-5px);
}

.project-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
}

.tags {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0;
}

.tag {
  background: #e8f5e9;
  color: #2e7d32;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.875rem;
}

.btn {
  display: inline-block;
  background: #42b983;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.3s;
}

.btn:hover {
  background: #35a372;
}
</style>