کانفیگ های Runtime و App در Nuxt 3
دو نوع Configuration داریم، یک نوع این که سمت Client استفاده میشه و یک نوع دیگه هم اینه که چون اطلاعات حساسی هستند مثل رمز میخوایم که فقط سمت سرور استفاده بشن یا به طور دقیق تر در زمان Build قابل دسترسی باشد و سمت Client فرستاده نشن. برای این که کانفیگ ما از نوع دوم باشه باید این مقادیر رو توی فایل nuxt.config.js اضافه کنیم:
export default defineNuxtConfig({ runtimeConfig: { // The private keys which are only available within server-side apiSecret: '123', // Keys within public, will be also exposed to the client-side public: { apiBase: '/api' } }})نکته ای که هست اینه که احیانا اگر مقادیری که توی این Runtime Config هست رو میخوایم که سمت کلاینت هم به اصطلاح expose بشه میتونیم از کلید public استفاده کنیم، خارج از اون این مقادیر فقط سمت سرور قابل دسترسی خواهند بود. برای کانفیگ نوع یک که همه ی مقادیر سمت کلاینت هم قابل استفاده خواهند بود باید یک فایل به اسم app.config.js داخل root پروژه بسازیم و به این شکل مقادیر خودمون رو اضافه کنیم:
export default defineAppConfig({ foo: 'bar'})تفاوت این دو مدل کانفیگ رو توی عکس زیر می بینید:
همانطور که می بینید توی runtimeConfig نمیتونیم از مقادیری که premitive نیستند (آرایه و آبجکت) استفاده کنیم. HMR رو پشتیبانی نمیکنه و قابلیت کانفیگ دوباره برای هر ریکوئست رو نداره. در مقابل توی app config هم نمیتونیم از env استفاده کنیم.
نحوه ی استفاده از RuntimeConfig:
const runtimeConfig = useRuntimeConfig()console.log(runtimeConfig.apiSecret)console.log(runtimeConfig.public.apiBase)نحوه ی استفاده از app config:
<script setup lang="ts">const appConfig = useAppConfig()console.log(appConfig.theme)</script>نکته ی آخر هم این که برای استفاده از متغیر های environment در runtime config باید از پیشوند NUXT_ استفاده کنید:
NUXT_API_SECRET=api_secret_tokenNUXT_PUBLIC_API_BASE=https://nuxtjs.orgدر آخر خوبه که منابع زیر رو یه دور با دقت بررسی کنید:
https://nuxt.com/docs/guide/directory-structure/app-config