เริ่มต้นเขียน Nuxt.js จาก baby to ready

สำหรับ Blog นี้เหมาสำหรับคนที่เคยเขียน Vue.js มาเเล้ว หรือเคยผ่านการเขียน Javascript เบื่องต้นมาก่อน เพราะว่า Nuxt นั้นมีพื้นฐานการเขียนมาจาก Vue นั้นเอง ซึ่ง Nuxt จะจัดการหลายๆอย่างให้เราสามารถเขียน Vue ได้ง่ายขึ้นนั้นเอง จะเป็นยังไงเรามาลองดูกันนนนน

ขั้นเเรกให้เครื่องเรามี npx ก่อนนะครับ ถ้ายังไม่ชัวลองเปิด Terminal เเล้วพิมพ์

npx -v

ถ้ามีเลข version แบบนี้แล้วก็มาเริ่มสร้าง project กันเลย จาก command

npx create-nuxt-app <project-name>

เริ่มสร้าง project ตัว Nuxt ก็จะถามการตั้งค่าต่างๆ ทั้ง project name, description, UI framework, server framework(เลือก None เพราะเราจะทำเเค่ Client) และตั้งค่าอื่นๆ อีก ซึ่งพอสร้าง project เสร็จแล้วก็ลอง run ขึ้น project ขึ้นมาด้วย command ด้านล่างนี้

cd myProject
npm run dev

หน้าตาของ Terminal และหน้าเว็บเมื่อเริ่ม run project ได้สำเร็จ

หลังจาก run แล้วลองเข้าไปดูใน project ดูว่าเราได้อะไรกันมาบ้าง อย่างที่เห็น จะมี folder หลักๆ เราสนใจเเละใช้บ่อยๆก็จะเป็น

• ไฟล์ nuxt.config.js
• pages
• components
• plugins
• store

ส่วน folder อื่นๆ เราก็ยังได้ใช้อยู่เเต่อาจจะไม่บ่อยขนาดนั้น เดี๋ยวผมจะค่อยพาทัวดูรอบๆกันนะครับ เริ่มจาก

nuxt.config.js

ไฟล์นี้สำคัญมากครับ เพราะจะเห็นได้ว่าไฟล์นี้เป็นไฟล์ที่สามารถตั้งค่า config ของทั้ง project ได้เลยทั้ง header ของเว็บ, loading, plugin, css, module รวมถึงการ build ต่างๆ เดี๋ยวเราจะต้องมายุ่งกับไฟล์นี้อีกเยอะครับ เเต่ตอนนี้พักไว่เท่านี้ก่อนไปต่อกันที่

Pages

Nuxt นั้นมีข้อดีอย่างนึงคือเราเสียเวลาจัดการ route น้อยมายซึ่ง folder pages นั้นจะจัดการให้เเค่เราสร้างไฟล์ vue เเล้วเอาไปวางไว้เท่านั้นเเหละเราก็สามารถเข้า route ตามชื่อไฟล์ที่เราสร้างไว้ได้เเล้วตามตัวอย่าง

components

components นั้นถือเป็นอีกหนึ่งส่วนที่สำคัญมากๆ เลยทีเดียวเพราะว่าเราจะใช้ component ในการ reuse ใช้ใน project อีกหลายๆที่นั้นเองวิธีสร้าง component เราก็ไปสร้างไฟล์ vue มาไว้ใน components folder เช่น

แล้วเราก็เรียก import ในไฟล์ที่เราจะเรียกใช้ โดยที่ใน template ของไฟล์ที่เราเรียกใช้ component นั้นก็จะใช้ชื่อที่เรา import มานั้นเอง ตาตัวอย่างก็จะเป็น <buttonComponent />

plugins

plusins ของ nuxt มีหน้าที่ดูเเลเรื่อง library ที่เรา import มาใช้ซึ่งผมจะยกตัวอย่างเป็น moment กับ datepicker ซึ่งตัว plugin นั้นสามารถเขียนออกมาได้ทั้งแบบที่เป็น component หรือเรียกใช้แบบ context(inject) เรามาดูกันทีละอย่างเริ่มจาก

inject คือการใช้ library ที่เรา install มาเเล้วอยากจะเอามาใช้ใน project ซึ่งสามารถเรียกผ่าน context กลางนั้นก็คือ $ นั้นเอง ครั้งนี้ผมจะลองใช้ moment ก็ลอง

npm install moment

หลังจาก install moment เรียบร้อยเเล้วเราก็มาสร้างไฟล์ตาม moment.js เอาไปไว้ที่ plugins folder เลยครับ พอเรียบร้อยเเล้วเราก็ไปที่ไฟล์ nuxt.config.js เเละมาเพิ่ม ~/plugins/moment.js ไว้ที่ plugins ได้เลย

plugins: ['~/plugins/moment.js'],

แล้วที่นี้ถ้าจะเรียกใช้หละ ก็แค่ไปที่ไฟล์ที่เราจะใช้เเล้วเรียก this.$moment() ซึ่งสามารถส่ง param ไปได้ตามที่เราอยากจะส่งเลยนั้นเอง

หลังจากเพิ่ม moment ไปเเล้ว helloWorld.vue ของเราก็จะหน้าตาประมาณนี้

component วิธีใช้ก็จะคล้ายๆกับ inject เเต่ต่างกันตรงที่ inject นั้นเวลาใช้เราจะเรียกผ่าน $ แต่ component นั้นเราจะเรียกใช้เป็น component อีกตัวนึงเลยนั้นเองซึ่งผมจะขอเลือก vue2-datepicker มาเป็นตัวอย่าง ลองทำไปด้วยกันนะครับ เริ่มจาก install กันก่อน

npm install vue2-datepicker --save

หลังจาก install เรียบร้อยเเล้วเราก็ไปสร้าง datepicker.js ใส่ไว้ใน plugins และไปเพิ่ม plugins ในไฟล์ nuxt.config.js เหมือนที่เราพึ่งทำไปเมื่อข้อก่อนหน้าเลยครับ

plugins: [
'~/plugins/moment.js',
{ src: '~/plugins/datePicker.js', ssr: false }
],

ssr คืออะไร? ผมไม่ต้องการให้ nuxt ทำ server side rendering ผมก็เลยตั้งให้เป็น false นั้นเอง

ทีนี้เวลาเราเรียกใช้เราก็เรียกเหมือนเป็น component ธรรมาเลย เพียงเเต่เราไม่ต้อง register component เท่านั้นเอง โดยการเอา date-picker ไปใส่ต่อจากเจ้า moment เมื่อกี๊ก็ได้เเล้วครับ

<date-picker placeholder="select date" format="DD/MM/YYYY"/>

หน้าตาหลังจากเอา date picker มาใส่

store

เมื่อเราอยากจะส่งข้อมูลข้าม component หลายๆ component มักจะเกิดปัญหากับการส่ง data ซึ่งต้อง รับ prop หรือ emit ต่างๆ ซึ่งเราสามารถ set store ไว้ใช้ซึ่งสามารถเรียกได้จากทุกๆ component เริ่มจากสร้าง address.js มาใส่ไว้ใน store เลยครับ

จะเห็นว่าเรามี const state เเล้วเก็บ address ไว้(param ที่เอาไว้เรียก) ส่วน const mutations เอาไว้เรียกตอนจะ set state จากที่อื่น เดี๋ยวผมจะทำ blog แยกมาสำหรับเรื่อง store อีกทีแบบละเอียดๆ ให้นะครับ เรามาต่อกันคือเพิ่ม index.js ใน store folder ด้วย

ทีนี้เวลาใช้เราก็เรียกโดยใช้

• this.$store.commit เพื่อ set ค่าไปยัง store
• this.$store.state เพื่อ get ค่าจาก store

สามารถดูวิธี set จาก บรรทัด 36 และวิธี get จากบรรทัด 44

ที่นี้ถ้าเราอยากจะเห็นว่า store ของเราทำงานรึยังสามารถ inspect ดูได้ใน console

ซึ่งถ้าใครอยากจะดูเพิ่มเติมผมก็แนะนำ extension vue dev tools เพื่อข้อมูลต่างๆใน vue ของเราได้

Vue.js devtools

ส่วนใครที่อยากจะอ่านเพิ่มเติมสำหรับ Nuxt ก็สามารถ อ่านได้จากลิ๊งด้านล่างนี้เลย

Nuxt.js - The Vue.js Framework

มาทำ Lazy loading images กับ nuxt.js กันเถอะ Google ให้อภัยแล้ว

ก็ผ่านไปเเล้วสำหรับส่วนต่างๆที่เราใช้กันบ่อยๆใน Nuxt ผมก็หวังว่า blog นี้จะเป็นประโยชน์ไม่มากก็น้อย ซึ่งต่อไปผมจะเขียนเจาะลงไปในรายละเอียด และ tips ต่างๆที่ผมคิดว่าใช้บ่อยๆ หรือมีประโยชน์มาแชร์ให้ใน blog ต่อๆไปนะครับ สำหรับวันนี้ผมโจ๊ก ก็ต้องขอตัวลากันไปก่อน สวัสดีครับบบบบบ