รวบรวมสิ่งที่เรียนรู้เกี่ยวกับ Nuxt JS


กลับมาตั้งใจจะเขียน 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>

ก็ใช้ได้เลย แต่ไม่รู้ว่าเพราะอะไรเหมือนกัน

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Navigate

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

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

    ประเภทของคุกกี้มีความจำเป็นสำหรับการทำงานของเว็บไซต์ เพื่อให้คุณสามารถใช้ได้อย่างเป็นปกติ และเข้าชมเว็บไซต์ คุณไม่สามารถปิดการทำงานของคุกกี้นี้ในระบบเว็บไซต์ของเราได้

  • คุกกี้เพื่อการวิเคราะห์

    คุกกี้นี้เป็นการเก็บข้อมูลสาธารณะสำหรับการวิเคราะห์ และเก็บสถิติการใช้งานภายในเว็บไซต์นี้เท่านั้น ไม่ได้เก็บข้อมูลส่วนตัวที่ไม่เป็นสาธารณะใดๆ ของผู้ใช้งาน

บันทึกการตั้งค่า