Nuxt.js Configuration

ภาพรวม

ไฟล์ nuxt.config.ts เป็นไฟล์หลักที่ใช้กำหนดค่าต่างๆ ของแอปพลิเคชัน Nuxt.js อยู่ที่รากโปรเจค (root) ของโปรเจค สามารถใช้เพื่อกำหนดค่าต่างๆ หรือขยายความสามารถของแอปพลิเคชันได้

ไฟล์ Configuration พื้นฐาน

export default defineNuxtConfig({
  // การกำหนดค่าต่างๆ
});

ตารางเปรียบเทียบ runtimeConfig และ app.config

คุณสมบัติ	runtimeConfig	app.config
การกำหนดค่า	กำหนดใน nuxt.config.ts	กำหนดใน app.config.ts
การ Override	ใช้ environment variables ได้	กำหนดค่าตายตัวที่ build time
การเข้าถึง	ใช้ useRuntimeConfig()	ใช้ useAppConfig()
การใช้งาน	ค่าที่เป็นความลับหรือต้องการกำหนดทีหลัง	ค่าคงที่ของแอป เช่น theme, title
ตัวอย่าง	API keys, tokens	Theme settings, feature flags

ตาราง Configuration ไฟล์ภายนอก

เครื่องมือ	ไฟล์ Config	การกำหนดค่าใน Nuxt
Nitro	nitro.config.ts	nitro ใน nuxt.config.ts
Vite	vite.config.ts	vite ใน nuxt.config.ts
webpack	webpack.config.ts	webpack ใน nuxt.config.ts
PostCSS	postcss.config.js	postcss ใน nuxt.config.ts
TypeScript	tsconfig.json	-
ESLint	eslint.config.js	-
Prettier	prettier.config.js	-

ตัวอย่างการกำหนดค่า

1. กำหนดค่า runtimeConfig

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    // ค่าที่ใช้เฉพาะฝั่งเซิร์ฟเวอร์
    apiSecret: "123",
    // ค่าที่เข้าถึงได้ทั้งฝั่งไคลเอนต์และเซิร์ฟเวอร์
    public: {
      apiBase: "/api",
    },
  },
});

2. กำหนดค่า app.config

// app.config.ts
export default defineAppConfig({
  title: "แอปของฉัน",
  theme: {
    dark: true,
    colors: {
      primary: "#00DC82",
      secondary: "#2D2E35",
    },
  },
});

3. กำหนดค่า Environment ตามสภาพแวดล้อม

// nuxt.config.ts
export default defineNuxtConfig({
  // ใช้เมื่อ build สำหรับ production
  $production: {
    routeRules: {
      "/**": { isr: true },
    },
  },
  // ใช้เมื่อรันในโหมด development
  $development: {
    devtools: { enabled: true },
  },
  // ใช้เมื่อกำหนด envName เป็น 'staging'
  $env: {
    staging: {
      runtimeConfig: {
        public: {
          apiBase: "https://staging-api.example.com",
        },
      },
    },
  },
});

การกำหนดค่า Vue

1. ใช้กับ Vite

export default defineNuxtConfig({
  vite: {
    vue: {
      // กำหนดค่า @vitejs/plugin-vue
      customElement: true,
    },
    vueJsx: {
      // กำหนดค่า @vitejs/plugin-vue-jsx
      mergeProps: true,
    },
  },
});

2. ใช้กับ webpack

export default defineNuxtConfig({
  webpack: {
    loaders: {
      vue: {
        hotReload: true,
      },
    },
  },
});

ฟีเจอร์ทดลองใช้ (Experimental Features)

export default defineNuxtConfig({
  // เปิดใช้ View Transitions API
  experimental: {
    viewTransition: true,
  },
  // เปิดใช้ Vue experimental features
  vue: {
    propsDestructure: true,
  },
});

สรุป

• ใช้ runtimeConfig สำหรับค่าที่ต้องการกำหนดผ่าน environment variables
• ใช้ app.config สำหรับค่าคงที่ที่กำหนดตอน build time
• กำหนดค่าเครื่องมือต่างๆ ผ่าน nuxt.config.ts
• สามารถแยกการกำหนดค่าตามสภาพแวดล้อมได้
• เปิดใช้ฟีเจอร์ทดลองใช้ได้ตามต้องการ

TIP

• ควรแยกค่าความลับออกมาไว้ใน runtimeConfig
• ใช้ TypeScript เพื่อความปลอดภัยของประเภทข้อมูล
• ทดสอบการทำงานในทุกสภาพแวดล้อมที่กำหนดค่าไว้