Nuxt

หน้านี้สอนอะไร

Nuxt module ติดตั้งหน้า admin และ API อย่างไร มีตัวเลือกอะไร และดึงเนื้อหาใน server route และหน้าเว็บอย่างไร

@easy-cms/nuxt คือ module สำหรับ Nuxt 4

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@easy-cms/nuxt'],
  easyCms: {
    // configPath: 'easy-cms.config.ts',
    // trustProxy: false,
  },
})

เมื่อมี easy-cms.config.ts อยู่ที่ root ของโปรเจกต์ module นี้จะ:

ให้บริการ REST API ที่ routes.api (ค่าเริ่มต้น /api/cms) และหน้า admin ที่ admin.path (/admin)
auto-import server utility สองตัวที่มี type ตาม config ของคุณ:

// server/api/posts/[slug].get.ts
export default defineEventHandler(async (event) => {
  const cms = await useEasyCMS()
  const user = await useEasyCMSUser(event) // the logged-in Easy CMS user, or null
  const { docs } = await cms.find('posts', {
    where: { slug: { equals: getRouterParam(event, 'slug') } },
    // Let access rules decide, and show drafts to logged-in editors.
    overrideAccess: false,
    user,
    draft: user !== null,
    limit: 1,
  })
  return docs[0] ?? null
})

ตัวเลือก

ตัวเลือก	ค่าเริ่มต้น
`configPath`	`easy-cms.config.ts`	path ไปยัง config ของ Easy CMS
`trustProxy`	`false`	ใช้ `X-Forwarded-For` เป็น IP ของ client สำหรับจำกัดอัตราการเข้าสู่ระบบ ใช้เฉพาะเมื่ออยู่หลัง proxy ที่คุณควบคุมเท่านั้น

หมายเหตุ

module จะเชื่อมต่อตอน server เริ่มทำงาน: ปัญหาของ schema (migration ที่ค้างอยู่) จะแสดงใน log ทันที
ไฟล์ static ของหน้า admin เป็น public asset ของ Nitro ดังนั้นบนแพลตฟอร์มที่มี CDN ไฟล์เหล่านี้จะถูกเสิร์ฟ จาก CDN
production server ของ Nuxt ไม่อ่าน .env ให้ตั้งค่า EASY_CMS_SECRET บนโฮสต์ หรือเริ่ม server ด้วย node --env-file=.env .output/server/index.mjs ดู Environment variables
build สำหรับ production จะรวมไฟล์ native ของไดรเวอร์ฐานข้อมูล (libSQL) ไปด้วย ให้ build บน OS และสถาปัตยกรรมเดียวกับที่ deploy และเริ่ม server จาก root ของโปรเจกต์

ดูตัวอย่าง Nuxt

ขั้นต่อไป

Local API: อ่านและเขียนเนื้อหาใน server route
ตัวอย่างสด (live preview): แสดงการแก้ที่ยังไม่บันทึกบนหน้าเว็บ

Nuxt ​

ตัวเลือก ​

หมายเหตุ ​

ขั้นต่อไป ​

Nuxt

ตัวเลือก

หมายเหตุ

ขั้นต่อไป