How to set custom layout when using nuxt-property-decorator?

user_11766408 0
Viewed 353

Summery

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",

Some code

Case1

<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)

Case 2

<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)
vuejs2 nuxt.js vue.js typescript javascript
1 Answers

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>
user_117664080
Related