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

เขียนวันที่ : Aug 22, 2020

•

(อัพเดท : Mar 19, 2022)

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

nuxt.config.js

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 ดูครับ

Tutorials

Latest Posts

Tags