Nuxt.js Fundamental ตอนที่ 2 - สร้าง Nuxt.js ด้วย create-nuxt-app

เนื้อหาของบทเรียน 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

สำหรับ ขั้นตอนนี้ เราจะใช้ตัวช่วยอย่าง create-nuxt-app มาขึ้นโปรเจ็ค Nuxt.js ครับ ข้อดีของ create-nuxt-app คือ เป็น Script ที่ช่วยทำให้เราไม่ต้องมา Config ค่าต่างๆ ของ Nuxt.js เลย รวมถึงเราสามารถเลือก Custom ว่าจะใส่อะไรมาในโปรเจ็คบ้าง เช่น

• เลือกได้ว่าจะขึ้นโปรเจ็คด้วย Typescript หรือ JavaScript
• เลือก UI Framework ที่ต้องการได้ เช่น Buefy, Bulma, Vuetiry, Element Tailwind CSS เป็นต้น
• เลือกติดตั้ง Nuxt modules อื่นๆ ได้ด้วยเช่น axios, pwa, content, auth เป็นต้น
• เลือก Linting Tools เช่น ESLint & Prettier
• กำหนด Testing framework ได้เช่น Jest, AVA
• เลือกโหมดได้ว่าจะเป็น SSR หรือ SPA จะ Host เป็น Node.js หรือแค่ static hosting ทั่วๆไป

เว็บไซต์ของ Create Nuxt App - Create Nuxt App**

ซึ่งจะเห็นได้ว่า มันเป็น common ที่ทุกๆ โปรเจ็คจะต้องใช้ แค่เลือกว่าจะใช้อะไรบ้าง ทำให้เราประหยัดเวลา ไม่ต้องมานั่งขึ้นโปรเจ็ค มา config อะไรเอง บาง project ก็ใช้เหมือนๆกัน ก็ให้ create-nuxt-app generate ให้เลยครับ

Let’s Started!

ลองมาใช้งานจริงๆกันดูครับ ตัวอย่าง เราจะใช้ create-nuxt-app ผ่าน NPX เลยนะครับ (ผมจะตั้งชื่อโฟลเดอร์ใหม่ว่า hello-nuxt-app)

npx create-nuxt-app hello-nuxt-app

หรือจะใช้ npm init ก็ได้แบบนี้

npm init nuxt-app hello-nuxt-app

หากข้อนั้นเป็น multi-choice เราสามารถกด <space> เพื่อเลือกได้ครับ หรือกด <a> กรณีเลือกทั้งหมด

✨  Generating Nuxt.js project in hello-nuxt-app
? Project name: hello-nuxt-app
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: ESLint, Prettier
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)

เมื่อเราเลือกได้แล้ว ก็รอ npm หรือ yarn ติดตั้งพวก dependencies และ setup Project ให้เราครับ

เมื่อเรียบร้อยแล้ว ก็แค่เปิด Folder ขึ้นมา

cd hello-nuxt-app

แล้วสั่ง

yarn dev

# หรือ npm
npm run dev

จะเห็น result แบบด้านล่างนี้ ก็เปิดหน้าเว็บ http://localhost:3000/ ได้เลยครับ

╭───────────────────────────────────────╮
│                                       │
│   Nuxt.js @ v2.14.1                   │
│                                       │
│   ▸ Environment: development          │
│   ▸ Rendering:   client-side          │
│   ▸ Target:      static               │
│                                       │
│   Listening: http://localhost:3000/   │
│                                       │
╰───────────────────────────────────────╯

ℹ Preparing project for development                                                                                               20:17:10
ℹ Initial build may take a while                                                                                                  20:17:10
✔ Builder initialized                                                                                                             20:17:11
✔ Nuxt files generated                                                                                                            20:17:11

✔ Client
  Compiled successfully in 7.71s

ℹ Waiting for file changes                                                                                                        20:17:19
ℹ Memory usage: 200 MB (RSS: 271 MB)                                                                                              20:17:19
ℹ Listening on: http://localhost:3000/

Folder Structure

สำหรับโปรเจ็คที่สร้างด้วย create-nuxt-app หากเราสังเกต เราจะเห็นว่า มีโฟลเดอร์ดังต่อไปนี้ครับ

• assets - เป็น Folder สำหรับเก็บไฟล์ assets พวกรูปภาพ ไฟล์ JavaScript ไฟล์ CSS ของเรานั่นเอง
• components - เป็น Folder สำหรับเก็บไฟล์ components ไม่สามารถใช้ asyncData ใน folder นี้ได้ (เดี๋ยวพูดถึงในหัวข้อถัดไปครับ)
• layouts - เป็น Folder ที่ให้เราสามารถกำหนด Layout ให้กับ Pages ของเราได้
• middleware - สำหรับเก็บไฟล์ Middleware คือพวก function ที่ให้เราจัดการ หรือ condition ต่างๆ ก่อน render Page
• pages - เป็น Folder ที่หากเราสร้างไฟล์ *.vue ตัว Nuxt.js ก็จะ auto generate หน้าเว็บให้เราเลย
• plugins - พวก custom JavaScript ต่างๆ ที่เราต้องการให้มันรันก่อน Vue.js ครับ (ต่างกับ Middleware นะ) เช่น เราสามารถ register Component แบบ Global ได้ที่นี่
• store - ไฟล์สำหรับ Store และ Vuex ครับ (default มันจะ disabled ไว้ หากอยากใช้งานก็แค่สร้างไฟล์ index.js)
• nuxt.config.js - เป็นไฟล์ configuration ของ Nuxt.js ครับ และเป็นหัวใจสำคัญเลย ที่ทำให้เรากำหนดค่าต่างๆ เช่น build static หรือ SPA หรือ Universal กำหนด Modules ต่างๆ เป็นต้น
• static - เป็น Folder ที่เก็บพวก static files เช่น robots.txt, favicon.ico

Nuxt configuration

1
export default {
2
  mode: 'spa',
3
  target: 'static',
4
  head: {
5
    title: process.env.npm_package_name || '',
6
    meta: [
7
      { charset: 'utf-8' },
8
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
9
      {
10
        hid: 'description',
11
        name: 'description',
12
        content: process.env.npm_package_description || ''
13
      }
14
    ],
15
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
16
  },
17
  css: [],
18
  plugins: [],
19
  components: true,
20
  buildModules: ['@nuxtjs/eslint-module'],
21
  modules: [],
22
  build: {}
23
}

จะเห็นว่าไฟล์ nuxt.config.js เราสามารถกำหนด หรือปรับแต่ง ได้มากมายครับ และที่เห็นคือค่า default ที่เราเลือก ตอนที่เราสั่งสร้างโปรเจ็คด้วย create-nuxt-app นั่นเอง

• mode - เราจะกำหนดเป็น spa - Single Page Application หรือ universal Server Side rendering ก็ได้
• target - คือให้เป็นแบบ static Static files หรือแบบ server รันด้วย Node.js Application
• head - คือการกำหนด header ให้กับ HTML Document ของเรา เช่นการกำหนด title, meta tags ต่างๆ (เป็นแบบ global) เราสามารถกำหนด head ให้แต่ละ Component หรือ Pages ได้เช่นกัน
• css - หากเราอยากกำหนด CSS แบบ global อยากใช้ Bootstrap, Bulma, Vuetify หรือ SASS, SCSS เราก็มากำหนดในนี้ครับ
• modules - เราสามารถกำหนด Nuxt Modules ในนี้ได้ครับ เช่น content, auth, axios เป็นต้น

ซึ่งตัว nuxt.config.js สามารถอ่านเพิ่มเติมได้ครับ Nuxt.js Configuration

Build Project

ทีนี้ ลอง Build ตัว Project Nuxt.js ของเรากันดูครับ ตอนนี้เราเป็น mode: 'spa' ซึ่งเป็น Single Page Application แต่เรา target: 'static'

เราสามารถใช้คำสั่ง

yarn generate

เราจะได้ folder dist ที่เป็น static version ของเรา สามารถอัพ folder นี้ไป hosting ได้เลยครับ (ลองดูใน dist จะเห็นไฟล์ index.html นั่นเอง)

เราจะได้ความสามารถ pre-render ไฟล์ html ของเราทั้งหมดนะครับ

หรือลองใช้ serve รันดูครับ

npx serve -s dist

ทีนี้ ลองเปลี่ยน nuxt.config.js เป็น target: 'server'

หากเราจะรัน Production ต้องสั่ง build ก่อน start ครับ

yarn build

yarn start

จะได้ผลลัพธ์แบบนี้

                          Asset       Size  Chunks                         Chunk Names
 ../server/client.manifest.json    6.7 KiB          [emitted]
                       LICENSES  389 bytes          [emitted]
                 app.ba3a497.js   51.3 KiB       0  [emitted] [immutable]  app
node_modules/commons.657e0b7.js    155 KiB       1  [emitted] [immutable]  node_modules/commons
         pages/index.1dd5718.js   2.98 KiB       2  [emitted] [immutable]  pages/index
             runtime.25198a3.js   2.32 KiB       3  [emitted] [immutable]  runtime

$ nuxt start
╭──────────────────────────────────────────╮
│                                          │
│   Nuxt.js @ v2.14.1                      │
│                                          │
│   ▸ Environment: production              │
│   ▸ Rendering:   client-side             │
│   ▸ Target:      server                  │
│                                          │
│   Memory usage: 28.6 MB (RSS: 77.3 MB)   │
│                                          │
│   Listening: http://localhost:3000/      │
│                                          │
╰──────────────────────────────────────────╯

แต่ถ้า Development เรารันแค่ yarn dev ก็พอครับ มันจะ build และ reload ให้ครับ

Hints & Questions?

• เพื่อนๆ ลอง create nuxt app ด้วยวิธีต่างๆ ดูนะครับ เช่น เลือก css framework แบบต่างๆ ใช้ ESLint, Prettier กำหนด Modules และลองดูรายละเอียดของไฟล์ nuxt.config.js ดูนะครับ
• create-nuxt-app รองรับ Typescript รึเปล่านะ? ถ้าสร้าง typescrypt project ได้ ทำยังไง?
• ลองไม่ใช้ create-nuxt-app ในการขึ้นโปรเจ็ค ค่อยๆ กำหนดค่าใน nuxt.config.js และเริ่มสร้าง folder ตาม structure ของ Nuxt ดูครับ

อ่านบทถัดไป 👉 ตอนที่ 3 - การกำหนด Routing