راهنمای Nuxt 4 – View ها – بخش ۴

این بخش توضیح می‌دهد چطور ظاهر (UI) برنامه‌ات در Nuxt ساخته و سازمان‌دهی می‌شود.

app.vue — نقطه ورود برنامه

فایل app.vue ریشه‌ی رابط کاربری برنامه است و برای تمام صفحات نمایش داده می‌شود.
یعنی همه‌ی routeها داخل این قالب رندر می‌شوند.

مثلا:

<template>
  <div>
    <h1>Welcome to the homepage</h1>
  </div>
</template>

نکته: در Nuxt نیازی به main.js مثل پروژه‌های معمول Vue نیست. Nuxt خودش به‌صورت خودکار این بخش را مدیریت می‌کند.

Components — اجزای قابل‌استفاده مجدد

کامپوننت‌ها بخش‌های قابل‌استفاده‌ی مجدد رابط کاربری هستند (مثل دکمه‌ها، هدر یا پیام‌ها).
در Nuxt کافی است آنها را در پوشه‌ی app/components بسازی — به‌صورت خودکار در کل پروژه در دسترس خواهند بود (نیازی به import دستی نیست).

مثلا:

<!-- app/app.vue -->
<template>
  <div>
    <h1>Welcome</h1>
    <AppAlert>This is auto-imported.</AppAlert>
  </div>
</template>

<!-- app/components/AppAlert.vue -->
<template>
  <span><slot /></span>
</template>

Pages — صفحه‌ها و مسیرها

فایل‌های داخل پوشه‌ی app/pages/ هرکدام نماینده‌ی یک مسیر (route) هستند.

مثلاً:

فایل	مسیر نمایش
index.vue	/
about.vue	/about

نمونه:

<!-- app/pages/index.vue -->
<template>
  <div>
    <h1>Welcome to homepage</h1>
  </div>
</template>

برای فعال کردن سیستم صفحات باید در app.vue این کامپوننت را قرار دهید:

<NuxtPage />

نکته: اگر فایل app.vue را حذف کنید، Nuxt خودش به‌طور خودکار این کار را انجام می‌دهد.

Layouts — قالب کلی صفحات

Layoutها قالب‌هایی هستند که چند صفحه از آن استفاده می‌کنند (مثلاً هدر و فوتر مشترک).
به‌صورت پیش‌فرض، فایل app/layouts/default.vue به‌عنوان قالب اصلی استفاده می‌شود.

نمونه:

<!-- app/layouts/default.vue -->
<template>
  <div>
    <AppHeader />
    <slot />
    <AppFooter />
  </div>
</template>

در app.vue:

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

در about.vue:

<template>
  <section>
    <p>This page is at /about</p>
  </section>
</template>

نکته: اگر فقط یک layout داری، نیازی به layouts/ نیست — از app.vue استفاده کن.

هر صفحه می‌تواند با meta خاص خود layout متفاوتی مشخص کند:

definePageMeta({ layout: 'admin' })

Extending the HTML Template (پیشرفته)

اگر بخواهی کل ساختار HTML خروجی را کنترل کنی، می‌توانی با یک پلاگین Nitro این کار را انجام دهی.
به کمک hook render:html می‌توانی قبل از ارسال HTML به مرورگر، آن را تغییر دهی:

// server/plugins/extend-html.ts
export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('render:html', (html) => {
    html.head.push('<meta name="description" content="My custom description" />')
  })
})

نکته: اگر فقط می‌خواهی تگ را تغییر دهی، از قابلیت‌های داخلی Nuxt برای SEO و Meta استفاده کن — نیازی به پلاگین نیست.

نکات کاربردی و تجربیات حرفه‌ای

ساختار پروژه تمیز و استاندارد

همیشه ساختار زیر را رعایت کن تا Nuxt بتواند auto-import را به‌درستی انجام دهد.

app/
├── app.vue
├── components/
├── layouts/
└── pages/

Auto-import حرفه‌ای

اگر کامپوننتی در پوشه‌ی components نیست (مثلاً در features/… قرار دارد)، باید مسیرش را در nuxt.config.ts در کلید components ثبت کنی:

export default defineNuxtConfig({
  components: [{ path: '~/features', pathPrefix: false }]
})

Layout سفارشی برای صفحات خاص

مثلاً برای صفحات ادمین، یک layout جدا بساز (layouts/admin.vue) و در صفحات مربوطه:

definePageMeta({ layout: 'admin' })

ترکیب کامپوننت و Layout

بهتر است عناصر تکراری (مثلاً یا ) در layout قرار بگیرند نه در صفحات — باعث سبک‌تر شدن صفحات و افزایش سرعت رندر می‌شود.

نکته مهم در SSR

محتوای layout و app.vue در سمت سرور رندر می‌شود، پس می‌توانی در آن‌ها از داده‌های global یا metaها برای SEO استفاده کنی.

تجربه واقعی توسعه

• وقتی پروژه بزرگ می‌شود، بهتر است برای هر feature (مثلاً blog یا dashboard) یک فولدر جدا با صفحات و layout مخصوص خودش بسازی.
• در پروژه‌های چندزبانه، می‌توان layout متفاوت برای زبان‌ها تعریف کرد تا UX بهینه‌تر شود.

جمع بندی

بخش	وظیفه
app.vue	نقطه‌ی ورود و چارچوب اصلی UI
components/	اجزای قابل استفاده مجدد
pages/	مسیرها و نمای هر صفحه
layouts/	قالب مشترک بین صفحات
Nitro plugin (render:html)	سفارشی‌سازی کامل خروجی HTML