Nuxt•4mo ago

[nuxt] Your project has layouts but the `<NuxtLayout />` component has not been used.

My app.vue looks like the following: I want to show pages only after a settings service loaded from API.

<template>
   <NuxtLayout v-if="settingsWrapper.loaded">
      <NuxtPage />
   </NuxtLayout>
   <div
      v-else
      class="d-flex justify-content-center align-items-center gap-1 vh-100"
   >
      <BSpinner variant="primary" />
      <span class="fw-bold">Loading ...</span>
   </div>
</template>

<script setup lang="ts">
const { settingsWrapper } = useAppServices()
</script>

<template>
   <NuxtLayout v-if="settingsWrapper.loaded">
      <NuxtPage />
   </NuxtLayout>
   <div
      v-else
      class="d-flex justify-content-center align-items-center gap-1 vh-100"
   >
      <BSpinner variant="primary" />
      <span class="fw-bold">Loading ...</span>
   </div>
</template>

<script setup lang="ts">
const { settingsWrapper } = useAppServices()
</script>

But then it throws out the warnings. I believe it is something to do with v-if but not sure how to fix it for this scenario:

[nuxt] Your project has layouts but the `<NuxtLayout />` component has not been used.
[nuxt] Your project has layouts but the `<NuxtLayout />` component has not been used.

[nuxt] Your project has layouts but the `<NuxtLayout />` component has not been used.
[nuxt] Your project has layouts but the `<NuxtLayout />` component has not been used.

2 Replies

Cake•4mo ago

how are you fetching the data in useAppService?

RayOP•4mo ago

The main logic is something like this: Should I call fetch settings outside of onMounted?

onMounted(() => {
      // Fetch settings on load
      fetchSettings()
   })

   // Function to fetch settings from the API using SettingsService
   const fetchSettings = async () => {
      settingsWrapper.isLoading = true
      try {
         settingsWrapper.settings = await settingService.getSettings()

onMounted(() => {
      // Fetch settings on load
      fetchSettings()
   })

   // Function to fetch settings from the API using SettingsService
   const fetchSettings = async () => {
      settingsWrapper.isLoading = true
      try {
         settingsWrapper.settings = await settingService.getSettings()

@Cake any suggestions about how to fix the above

Gaming

Programming

[nuxt] Your project has layouts but the `<NuxtLayout />` component has not been used.