Nuxt.js Fundamental ตอนที่ 5 - Nuxt Content และ Async Data

เนื้อหาของบทเรียน Nuxt.js

• ตอนที่ 1 - Getting Started with Nuxt.js
• ตอนที่ 2 - สร้าง Nuxt.js ด้วย create-nuxt-app
• ตอนที่ 3 - การกำหนด Routing
• ตอนที่ 4 - Nuxt.js Concept
• ตอนที่ 5 - Nuxt Content และ Async Data
• ตอนที่ 6 - การดึงข้อมูลจาก APIs
• ตอนที่ 7 - การใช้งานร่วมกับ Vuex Store
• ตอนที่ 8 - ทำระบบ Authentication ด้วย Nuxt.js
• ตอนที่ 9 - การ Deploy Nuxt.js
• ตอนที่ 10 - การทำ Internal API และ Middleware
• ตอนที่ 11 - ทำ SEO และ Meta tags
• ตอนที่ 12 - Workshop

Nuxt Content คืออะไร?

Nuxt Content เป็น Module ที่ทำให้เราสามารถที่จะอ่าน JSON, YAML, Markdown หรือ CSV ใน folder content เหมือนกับการใช้พวก MongoDB API หรือเป็น QueryBuilder API นั่นเอง

ข้อดีของ Nuxt Content คือ

• เร็วและรองรับ hot reload ในการ development
• รองรับ Full-text search
• เขียน Vue Components ใน Markdown ได้
• QueryBuilder API อารมณ์คล้ายๆ MongoDB API
• รองรับหลาย format ดังที่กล่าวไป CSV, YAML, JSON, XML, Markdown

วิธีการใช้งาน Nuxt Content

ก็เพียงแค่ install ผ่าน NPM หรือ yarn ได้เลยครับ

npm install @nuxt/content

จากนั้นที่ไฟล์ nuxt.config.js ก็ไปเพิ่ม @nuxt/content ไปในส่วนของ modules

1
  modules: [
2
    '@nuxt/content'
3
  ]
4
}

วิธีการทำงานของ Nuxt Content คือ

1. อ่านค่าจาก raw data (แล้วแต่ format เป็นอะไร)
2. ตัว Nuxt จะ transform raw data เป็นรูปแบบ JSON tree
3. ใช้ $content ในการ fetch data เพื่อมาแสดง (รองรับ async/await)
4. แสดงผลด้วยการใช้ <nuxt-content> Component (เฉพาะ Markdown)

เริ่มต้นเขียน Content

ลองด้วย Markdown ก่อนครับ สร้างไฟล์ hello.md ใน folder /content/posts ครับ

1
---
2
title: Hello World
3
description: Learn how to use @nuxt/content.
4
---
5

6
# Hello
7

8
This is <nuxt-link to="/">Home</nuxt-link>
9

10
This is paragraph

ซึ่ง Markdown ก็รองรับ Front matter ในรูปแบบ YAML (ใช้ - 3ตัว) ทำให้เรากำหนด key value เช่น title, description หรือจะเป็น published_date, author อะไรก็ได้

ทีนี้ ตัว Nuxt Content มันก็จะ generate ข้อมูลเป็น JSON tree หน้าตาประมาณนี้

1
{
2
  body: Object
3
  title: "Hello World"
4
  description: "Learn how to use @nuxt/content."
5
  dir: "/"
6
  extension: ".md"
7
  path: "/hello"
8
  slug: "hello"
9
  toc: Array
10
  createdAt: DateTime
11
  updatedAt: DateTime
12
}

ตัว createdAt และ updatedAt จะใช้เวลาตอนสร้างไฟล์ แต่เราสามารถ override ได้ โดยการกำหนดค่าใน Front Matter

ดูข้อมูลเพิ่มเติม Nuxt Content - Writing Content

หรือ เราสามารถใช้ไฟล์ YAML หรือ jSON ก็ได้ เช่น ไฟล์ /content/site.yml

1
site: https://devahoy.com
2
title: Devahoy

หรือไฟล์ /content/data.csv

1
id, name, age
2
1, John Doe, 25
3
2, Jane Doe, 23

Output ที่ได้ ก็คล้ายๆ กับ Markdown เพียงแค่เปลี่ยน body, extension และก็ path, slug ตามชื่อไฟล์นั่นเอง

Output ของ YAML

1
{
2
  'dir': '/',
3
  'slug': 'site',
4
  'path': '/site',
5
  'extension': '.yml',
6
  'site': 'https://devahoy.com',
7
  'title': 'Devahoy'
8
}

Output ของ CSV

1
  "dir": "/",
2
  "slug": "data",
3
  "path": "/data",
4
  "extension": ".csv",
5
  "body": [
6
    {
7
      "id": 1,
8
      "name": "John Doe",
9
      "age": 25
10
    },
11
    {
12
      "id": 2,
13
      "name": "Jane Doe",
14
      "age": 23
15
    }
16
  ]
17
}

การ Fetch ข้อมูล

ต่อมา เราจะ fetch data content กันนะครับ โดย Nuxt Content เราสามารถเรียกแบบ global ได้เลย ด้วย this.$content และ พวก plugins, asyncData, fetch, middleware เราสามารถเรียกผ่าน context ได้เลย เช่น context.$content

syntax ในการเรียกคือ

1
$content(path, options?)

• path - ถ้าเป็น file จะได้ result เป็น Object ถ้าเป็น folder จะเป็น Array

เช่น ผมจะดึงข้อมูลในไฟล์ /content/posts/hello.md ผมก็เรียกแบบนี้

1
const post = await this.$content('posts/hello').fetch()

นอกจากนี้เรายังใช้พวก where, limit, sortBy, only ได้เช่น

1
const posts = await this.$content('posts')
2
  .only(['title', 'createdAt'])
3
  .sortBy('createdAt', 'asc')
4
  .limit(5)
5
  .skip(10)
6
  .where({
7
    isArchived: false
8
  })
9
  .search('welcome')
10
  .fetch()

รายละเอียดเพิ่มเติม Nuxt Content - Fetching Content

ตัวอย่าง เช่น ผมจะดึงข้อมูล /content/site.yml มาแสดงใน pages/site.vue โดยผมใช้ $content ใน function asyncData นั่นเอง

1
<template>
2
  <h1>Ahoy!</h1>
3
  <p>Site : {{ site.site }}</p>
4
  <p>Title: {{ site.title }}</p>
5
</template>
6

7
<script>
8
  export default {
9
    async asyncData({ $content }) {
10
      const site = await $content('site').fetch()
11

12
      return {
13
        site
14
      }
15
    }
16
  }
17
</script>

การแสดงผล Content สำหรับ Markdown

สำหรับ Markdown มันค่อนข้างแตกต่างจากไฟล์อื่นนิดหน่อย เพราะมันต้อง Transform markdown เป็น HTML body แล้วเก็บอยู่ใน object ของ JSON ฉะนั้น เวลาแสดงผลใน Vue Component ก็เลยต้องใช้ <nuxt-content นั่นเอง ตัวอย่างเช่น

ไฟล์ /pages/hello.vue

1
  <article>
2
    <h1>{{ post.title }}</h1>
3
    <nuxt-content :document="post" />
4
  </article>
5
</template>
6

7
<script>
8
export default {
9
  async asyncData ({ $content }) {
10
    const post = await $content('posts/hello').fetch()
11

12
    return {
13
      post
14
    }
15
  }
16
}
17
</script>

เรื่อง CSS นิดหน่อย <nuxt-content> จะทำการเพิ่มคลาส .nuxt-content ให้เราอัตโนมัติ ทีนี้ ถ้าใครอยาก override หรือปรับ css ก็ต้องใช้ selecotr แบบนี้ครับ

1
.nuxt-content h1 {
2
  /* my custom h1 style */
3
}

Hints & Questions?

• เอ๊ะ แล้วถ้าเราอยากทำเป็นคล้ายๆ Blog โดยสร้างจากไฟล์ Markdown สมมติ มี 10 ไฟล์ และต้องมาสร้างเพจ pages/**.vue อีก 10 ไฟล์ด้วยรึเปล่านะ? เราจะทำ dynamic route ยังไงดี? ลองคิด และลองประยุกต์ใช้กันดูนะครับ :)
• ลองเล่น QueryBuilder API เช่น เราอยาก query โดยกำหนดเงื่อนไข .where() หรือกำหนด sortBy ยังไงดี?

อ่านบทถัดไป 👉 ตอนที่ 6 - การดึงข้อมูลจาก APIs