กลับมาตั้งใจจะเขียน Nuxt JS อีกครั้ง เหมือนไปเล่น React และ Next JS ยังไงก็รู้สึกมึนๆ งงๆ อยู่ดี เลยมาลอง Nuxt JS ที่เรารู้สึกว่าง่ายกว่าดูก่อนละกัน
สำหรับผู้เริ่มต้นก็มีคลิปสอนมากมายเลยนะ ลองดูหลายๆ คลิปดูก่อนเพื่อให้เกิดความเข้าใจ ของเคนเองก็ดูของหลายคนเหมือนกัน อันนี้จะเป็นของคุณ SaKKo sama เค้าสอนดีมากเลยและคลิปในช่องของเค้าก็สอนดีมากนะ ไปลองศึกษาดู
ต่อไปนี้จะขอจดย่อๆ ออกมาว่าสิ่งที่หาแล้วพยายามทำให้ได้มีอะไรบ้าง เดี๋ยวเผลอลืมอีก
การ Redirect
this.$router.replace('/url');
axios
// GET
const token = await this.$axios.get('/url');
// POST
const token = await this.$axios.post('/url', { username: 'aaa', password: 'bbb' });
Nuxt Auth
// ตรวจสอบการเข้าสู่ระบบ this.$auth.loggedIn // กำหนด user token this.$auth.setUserToken(token)
Get Parameters
// Get query string this.$route.query // Get params this.$route.params
เพิ่ม Class เข้าไปที่ <body>
<script>
export default {
head() {
return {
bodyAttrs: {
class: 'anyclass to your body tag',
},
}
}
}
</script>
จะเอาแพ็คเกจของ Vue มาใช้ ต้องทำเป็น Plugin
ตัวอย่างเช่น เอา Vue Thailand Address มาใช้ ก็ให้ทำเป็นไฟล์ plugin ก่อน โดยสร้างไฟล์ใหม่ที่โฟลเดอร์ plugins
plugins/jquery.thailand.js
import Vue from 'vue' import VueThailandAddress from 'vue-thailand-address' import 'vue-thailand-address/dist/vue-thailand-address.css' Vue.use(VueThailandAddress)
เสร็จแล้วใน nuxt.config.js ก็เพิ่ม plugin เข้าไปเพื่อใช้งาน
plugins: ['@/plugins/jquery.thailand.js'],
ก็จะสามารถใช้งานได้
ขึ้นเตือนใน Console ว่า The client-side rendered virtual DOM tree is not matching server-rendered content
หรือเต็มๆ คืออันนี้
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside, or missing . Bailing hydration and performing full client-side render.
วิธีแก้ที่รู้ตอนนี้คือเอา <client-only> ไปครอบ Component ที่ทำให้เกิดปัญหา เช่นของเคนตัว Menubar ของ PrimeVue ทำให้เกิดคำเตือนนี้ก็เอาไปครอบแบบนี้
<client-only> <Menubar :model="items" /> </client-only>
ก็ใช้ได้เลย แต่ไม่รู้ว่าเพราะอะไรเหมือนกัน