\n```\n\n**useRuntimeConfig:**\n```vue\n\n```\n\n**Key differences:**\n- **useNuxtApp** — instance access.\n- **useRuntimeConfig** — config only."}}]}

Vue.js: What is the difference between useNuxtApp and useRuntimeConfig in Nuxt 3?

159

🟢Vue.js⚡ middle

What is the difference between useNuxtApp and useRuntimeConfig in Nuxt 3?

useNuxtApp — Nuxt instance. useRuntimeConfig — configuration.

useNuxtApp:

vue

1<script setup>
2const nuxtApp = useNuxtApp()
3
4// Access provided values
5const api = nuxtApp.$api
6
7// Hooks
8nuxtApp.hooks.hook("page:finish", () => {
9    console.log("Page loaded")
10})
11</script>

useRuntimeConfig:

vue

1<script setup>
2const config = useRuntimeConfig()
3
4console.log(config.public.apiUrl)
5console.log(config.apiSecret)
6</script>

Key differences:

useNuxtApp — instance access.
useRuntimeConfig — config only.

Больше вопросов по Vue.js

What is the difference between useAsyncData and useFetch with key?What is the difference between useState and useCookie in Nuxt 3?

Назад к категории Vue.js