รวบรวมสิ่งที่เรียนรู้เกี่ยวกับ 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 เข้าไปที่

<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.

วิธีแก้ที่รู้ตอนนี้คือเอา ไปครอบ Component ที่ทำให้เกิดปัญหา เช่นของเคนตัว Menubar ของ PrimeVue ทำให้เกิดคำเตือนนี้ก็เอาไปครอบแบบนี้

<client-only>
  <Menubar :model="items" />
</client-only>

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

เขียนโดย KanexKane

นักเขียนโค้ด นักเก็บเรื่องราว และนักทดสอบ ชอบแบ่งปันสิ่งเล็ก ๆ ที่ทำให้วันธรรมดาพิเศษขึ้น

รู้จักกันอีกนิด →