N
Nuxt•6mo ago
Ray

[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
Cake•5mo ago
how are you fetching the data in useAppService?
Ray
RayOP•5mo 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

Did you find this page helpful?