Search code examples
vue.jslayoutnuxt.js

Nuxt.js Layout not being added to routes

I'm trying to apply my layout on other pages but it's not added. it's working fine on IndexPage but it's not in other routers I have my layout file on layouts/publicLayout.vue

<template lang="pug">
    .layout(class="overflow-x-hidden")
        NavBarMobileNavBar.relative.z-50(v-if="isMobile")
        NavBar(v-else)
        Nuxt
        Footer
</template>

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'
@Component({
  name: 'publicLayout'
})

here is the IndexPage code where the layout is applied:

<template lang="pug">
main.bg-gray-50
  section#hero.w-full.flex
 html/pug code...
</template>

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'
@Component({
  name: 'IndexPage',
  layout: 'publicLayout'
})

I did the same as always on another page called /services but's it's not applied it all:

<template lang="pug">
    .w-full.h-96.bg-red-400.text-center
        h1 Services
</template>

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'
@Component({
  layout: 'publicLayout'
})

when I opened the Devtools it shows me this: .nuxtLayoutDefault.vue

enter image description here

instead of : PublicLayout

enter image description here

Solution

  • Now it's working. I just noticed that I didn't close the </scrpit> tag on /services page