I want to set different header component to specific page.
layout
├ default.vue // <- common header
└ custom.vue // <- special header for spesific page
I want to know how to set different layout when useing nuxt-property-decorator.
https://github.com/nuxt-community/nuxt-property-decorator
"nuxt": "^2.15.7",
"nuxt-property-decorator": "^2.9.1",
<script lang="ts">
import { Component, Vue,} from 'nuxt-property-decorator'
@Component
export default class Component extends Vue {
layout () { // <- error on layout
return 'custom'
}
}
It returns following error
Duplicate function implementation.Vetur(2393)
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
@Component({
layout: 'custom' // <- error on layout: 'custom'
})
export default class Component extends Vue {
}
It returns following error
No overload matches this call.
Overload 1 of 2, '(options: ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<DefaultProps>, DefaultProps> & ThisType<...>): <VC extends VueClass<...>>(target: VC) => VC', gave the following error.
Argument of type '{ layout: string; }' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<DefaultProps>, DefaultProps> & ThisType<...>'.
Object literal may only specify known properties, and 'layout' does not exist in type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<DefaultProps>, DefaultProps> & ThisType<...>'.
Overload 2 of 2, '(target: VueClass<Vue>): VueClass<Vue>', gave the following error.
Argument of type '{ layout: string; }' is not assignable to parameter of type 'VueClass<Vue>'.
Object literal may only specify known properties, and 'layout' does not exist in type 'VueClass<Vue>'.Vetur(2769)
I found it's reqired to set layout on pages, not components.
├ components
│ └ index.vue // <- not here
└ pages
└ index.vue // <- here
It worked on pages/index.vue
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
@Component({
layout: 'custom',
})
export default class Page extends Vue {
}
</script>