Nuxt.js Fundamental ตอนที่ 1 - เริ่มต้นกับ Nuxt.js

เนื้อหาของบทเรียน 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.js กันนะครับ ซึ่งสิ่งที่ควรมีคือ เพื่อนๆ ต้องมีพื้นฐานการเขียนเว็บมาก่อน และพื้นฐานการใช้ Vue.js เบื้องต้นมานะครับ เพราะว่าบทความนี้จะไม่ได้สอน หรือพูดถึงเรื่องของ Vue.js จะเน้นไปที่ Feature และวิธีเขียนแบบ Nuxt.js เลยครับ

สิ่งที่ควรมี

• มีพื้นฐาน Vue.js มาแล้ว
• ติดตั้ง Node.js บนเครื่องเรียบร้อยแล้ว (อย่างต่ำ v.8.9.0)
• Text Editor แนะนำ VS Code ครับ

ถ้าหากเพื่อนๆ มีครบแล้ว ก็เริ่มกันเลยครับ

Nuxt.js Features

• Code Spliting - คือการแยก code ออกเป็นหลายๆ ไฟล์ เพื่อให้เว็บโหลดได้ไวขึ้น ลองเทียบกันว่าเรามี 10 components แต่หน้านั้น ใช้แค่ component เดียว เราก็โหลดแค่ไฟล์เล็กๆ ไฟล์เดียว ไม่ต้อง bundle ทั้งหมดมาครับ
• Pre rendering - จริงๆแล้ว มันก็คือ Static web ครับ ถ้าพูดง่ายๆ คือจะแปลงโค๊ดให้อยู่ในรูปแบบ HTML ทำให้พวก bot หรือ crawler สามารถอ่าน HTML Tag ได้ ถ้า SPA ทั่วๆไป จะเห็นเป็น JavaScript code
• Server Side Rendering (SSR) - ในโลกของ SPA (Single Page Application) เราจะแบ่งการ render 2 แบบก็คือ Client Side Rendering และ Server side rendering ซึ่ง Nuxt.js ก็ช่วยให้เราทำ Server Side Rendering ได้ร่วมกับ Pre rendering นั่นเอง
• Static Site Generator (SSG) - Nuxt.js มีความสามารถที่จะทำ Static Site คือเราทำการ export ไฟล์ Vue.js ทั้งหมดของเราเป็น Static ก็คือมีแค่ HTML/JavaScript/CSS ได้เลย
• SEO & Meta Tags - ด้วยความสามารถด้านบน ทำให้ Nuxt.js รองรับการทำ SEO เนื่องจาก Vue.js ธรรมดา จะมีปัญหาเรื่อง SEO นั่นเอง
• จัดการ Routing ให้อัตโนมัติ - แค่สร้างไฟล์ *.vue ในโฟลเดอร์ pages

Getting Started

เราจะเริ่มสร้างโปรเจ็ค Nuxt.js กันจาก 0 เลยนะครับ เริ่มแรก สร้างโฟลเดอร์เปล่าๆ ขึ้นมา ชื่อว่า hello-nuxtjs จากนั้นมีไฟล์ package.json 1 ไฟล์ ครับ

ที่ไฟล์ package.json เป็นดังนี้

1
{
2
  "name": "hello-nuxtjs",
3
  "scripts": {
4
    "dev": "nuxt",
5
    "build": "nuxt build",
6
    "generate": "nuxt generate",
7
    "start": "nuxt start"
8
  }
9
}

จากนั้นทำการ install nuxt.js ผ่าน NPM หรือ Yarn แล้วแต่ชอบ

npm install nuxt
# หรือ Yarn
yarn add nuxt

เราจะสังเกตที่ไฟล์ package.json ตรงส่วน scripts จะมี 4 คำสั่งคือ

• nuxt - เป็น mode default จะรันแบบ development mode จะ hot-reload และ Start dev server ให้เราโดยไม่ต้อง restart ใหม่
• nuxt build - เป็นการ build ตัว Nuxt.js สำหรับการ deploy (production mode)
• nuxt generate - เป็นการ generate static file สำหรับทำ SSG
• nuxt start - คำสั่งสำหรับ start server Nuxt.js นั่นเอง

Create first page

ข้อดีแรกของ Nuxt.js คือมันจะสร้าง Page ให้เรา auto เลย ถ้าเราใส่ไฟล์ *.vue ไว้ในโฟลเดอร์ pages ครับ ทำการสร้างโฟลเดอร์ pages และไฟล์ index.vue ขึ้นมาครับ

mkdir pages

จากนั้นสร้างไฟล์ index.vue ในโฟลเดอร์ pages ดังนี้

1
<template>
2
  <h1>Ahoy! Nuxt.js</h1>
3
</template>

สั่งรัน

npm run dev

ตัว Server เราที่เขียนด้วย Nuxt.js ก็จะแสดงผลละครับ http://localhost:3000

ทีนี้ หากเราอยากเพิ่มอีกหน้า เช่น http://localhost:3000/ahoy เราก็แค่สร้างไฟล์ ahoy.vue ใน pages แค่นั้นเอง

1
<template>
2
  <div>
3
    <h1>Ahoy!</h1>
4
    <p>This is new file named <strong>ahoy.vue</strong></p>
5
  </div>
6
</template>

หากเราสร้างโฟลเดอร์ ahoy และข้างในมีไฟล์ index.vue จะได้ผลลัพธ์เท่ากับการสร้างไฟล์ ahoy.vue ครับ

จะเห็นว่า มีแค่ไฟล์ .vue เราก็ได้เว็บแบบ Nuxt.js แล้ว ง่ายใช่มั้ยละครับ?

Hints & Questions?

• เพื่อนๆ ลองสร้างไฟล์ หลายๆ หน้าดูนะครับ เช่น หน้า home, about, contact เป็นต้น
• ลองแก้ไขไฟล์ และดูว่ามันรองรับ hot reload หรือไม่

อ่านบทถัดไป 👉 ตอนที่ 2 - สร้าง Nuxt.js ด้วย create-nuxt-app