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

Arthorn Kittinukul
Sep 26, 2019 · 3 min read

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

Image for post
Image for post

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

npx -v
Image for post
Image for post

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

npx create-nuxt-app <project-name>
Image for post
Image for post
Image for post
Image for post

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

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

หลังจาก 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 ตามชื่อไฟล์ที่เราสร้างไว้ได้เเล้วตามตัวอย่าง

Image for post
Image for post

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 ไปได้ตามที่เราอยากจะส่งเลยนั้นเอง

Image for post
Image for post
หลังจากเพิ่ม 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"/>
Image for post
Image for post
หน้าตาหลังจากเอา 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

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

I GEAR GEEK

เราคือกลุ่มคนที่มีความหลงไหลในการเขียนโปรแกรม และ…

Arthorn Kittinukul

Written by

I GEAR GEEK

เราคือกลุ่มคนที่มีความหลงไหลในการเขียนโปรแกรม และ มีประสบการณ์จากการทำงานจากทั้งในและนอกประเทศอย่างโชกโชน แต่ถ้าพวกเราเขียนโปรแกรมเพื่อจบงานไปอย่างเดียวมันก็ไม่สนุก พวกเราเลยรวมตัวกันขึ้นมาเปิดเป็นบริษัท Startup ที่มีชื่อว่า I GEAR GEEK ในจังหวัดเชียงใหม่นี้

Arthorn Kittinukul

Written by

I GEAR GEEK

เราคือกลุ่มคนที่มีความหลงไหลในการเขียนโปรแกรม และ มีประสบการณ์จากการทำงานจากทั้งในและนอกประเทศอย่างโชกโชน แต่ถ้าพวกเราเขียนโปรแกรมเพื่อจบงานไปอย่างเดียวมันก็ไม่สนุก พวกเราเลยรวมตัวกันขึ้นมาเปิดเป็นบริษัท Startup ที่มีชื่อว่า I GEAR GEEK ในจังหวัดเชียงใหม่นี้

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store