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

สวัสดีครับ บทความนี้ผมจะพาเพื่อนๆ น้องๆ พี่ๆมาลองเขียนเว็บไซต์ด้วยการใช้ 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 เป็นดังนี้

{
  "name": "hello-nuxtjs",
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "start": "nuxt start"
  }
}

จากนั้นทำการ 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 ดังนี้

<template>
  <h1>Ahoy! Nuxt.js</h1>
</template>

สั่งรัน

npm run dev

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

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

<template>
  <div>
    <h1>Ahoy!</h1>
    <p>This is new file named <strong>ahoy.vue</strong></p>
  </div>
</template>

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

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

Hints & Questions?

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