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

สำหรับ ขั้นตอนนี้ เราจะใช้ตัวช่วยอย่าง 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

ซึ่งจะเห็นได้ว่า มันเป็น 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/

Hello Nuxt.js

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

export default {
mode: 'spa',
target: 'static',
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
css: [],
plugins: [],
components: true,
buildModules: [
'@nuxtjs/eslint-module'
],
modules: [],
build: {}
}

จะเห็นว่าไฟล์ 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 ดูครับ
FacebookTwitterSupport Me
< Previous
ตอนที่ 1 - Getting Started with Nuxt.js
Next >
ตอนที่ 3 - การกำหนด Routing