Nuxt.js Views

app.vue

ไฟล์ app.vue เป็นจุดเริ่มต้นของแอปพลิเคชัน Nuxt.js โดยจะแสดงผลเนื้อหาสำหรับทุกเส้นทาง (route) ของแอป

vue

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

คอมโพเนนต์คือส่วนประกอบ UI ที่นำกลับมาใช้ใหม่ได้ เช่น ปุ่มและเมนู เก็บไว้ในโฟลเดอร์ components/ และจะสามารถใช้งานได้โดยอัตโนมัติโดยไม่ต้อง import

bash

components/
  AppAlert.vue

ตัวอย่างการใช้งาน:

vue

<template>
  <div>
    <h1>Welcome to the homepage</h1>
    <AppAlert>
      This is an auto-imported component.
    </AppAlert>
  </div>
</template>

หน้าเว็บแต่ละหน้าเก็บไว้ในโฟลเดอร์ pages/ โดยแต่ละไฟล์จะแทนเส้นทาง (route) หนึ่งเส้นทาง

bash

pages/
  index.vue    # เส้นทาง /
  about.vue    # เส้นทาง /about

ตัวอย่างหน้า about.vue:

vue

<template>
  <section>
    <p>This page will be displayed at the /about route.</p>
  </section>
</template>

เลย์เอาต์เป็นตัวห่อหุ้มหน้าเว็บหลายๆ หน้า โดยมี UI ร่วมกัน เช่น ส่วนหัวและส่วนท้ายเว็บ ไฟล์ layouts/default.vue จะถูกใช้เป็นค่าเริ่มต้น

ตัวอย่าง default layout:

vue

<template>
  <div>
    <AppHeader />
    <slot />
    <!-- เนื้อหาหน้าเว็บจะมาแสดงที่นี่ -->
    <AppFooter />
  </div>
</template>

การใช้งานใน app.vue:

vue

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

ตารางเปรียบเทียบ:

องค์ประกอบ	ที่เก็บ	คำอธิบาย
Components	`components/`	ส่วนประกอบ UI ที่นำกลับมาใช้ใหม่ได้
Pages	`pages/`	หน้าเว็บแต่ละหน้าและเส้นทาง
Layouts	`layouts/`	โครงสร้างพื้นฐานของหน้าเว็บ

TIP