Summary of Different Header Components in Nuxt
In order to set a different header component for a specific page in Nuxt, you can create separate layout files.
layout
├ default.vue // <- common header
└ custom.vue // <- special header for specific page
If you want to know how to set different layouts using nuxt-property-decorator, refer to the documentation here.
"nuxt": "^2.15.7",
"nuxt-property-decorator": "^2.9.1",
Code Examples
Case 1
<script lang="ts">
import { Component, Vue,} from 'nuxt-property-decorator'
@Component
export default class CustomComponent extends Vue {
layout () { // <- error on layout
return 'custom'
}
}
The above code returns an error:
Duplicate function implementation.Vetur(2393)
Case 2
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
@Component({
layout: 'custom' // <- error on layout: 'custom'
})
export default class CustomComponent extends Vue {
}
The above code returns an 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)