Nuxt / Vue.js in TypeScript: Object literal may only specify known properties, but 'components' does not exist in type 'VueClass'

项目背景, Nuxt(vue), TypeScript

生成完项目框架, 添加测试demo页面.

在生成的模板代码中添加layout配置如下:

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  layout: 'empty'
})
</script>

ts编译后控制台报错如下:

按照如上提示, 应该是项目中nuxt对vue的扩展缺少ts相关配置.

解决办法创建nuxt.d.ts文件. 然后配置如下:

import Vue, { ComponentOptions } from "vue";

declare module "vue/types/options" {
  interface ComponentOptions<
    V extends Vue,
    Data=DefaultData<V>,
    Methods=DefaultMethods<V>,
    Computed=DefaultComputed,
    PropsDef=PropsDefinition<DefaultProps>,
    Props=DefaultProps> {
    asyncData?: Function,
    fetch?: Function,
    head?: object | Function,
    layout?: string | Function,
    middleware?: string | string[],
    scrollToTop?: boolean,
    transition?: String | object | Function,
    validate?: Function,
    watchQuery?: boolean | string[]
  }
}

参考链接: https://stackoverflow.com/questions/49090240/nuxt-vue-js-in-typescript-object-literal-may-only-specify-known-properties-b