Ray
Ray
PostsComments
NNuxt
Created by Ray on 8/3/2024 in #❓・help
[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.
4 replies