Vue.js 布局中的Vue材质组件未出现在Nuxt.js应用程序中

我正在尝试创建一个应用程序，将其用作我的UI库。 我还可以在所有

.Vue

文件中使用Vue材质中的组件，我希望使用自定义主题。所有这些，我的

numxt.config.js

文件如下所示

导出默认值{
/*
**Nuxt渲染模式
**看https://nuxtjs.org/api/configuration-mode
*/
模式：“通用”，
/*
**Nuxt目标
**看https://nuxtjs.org/api/configuration-target
*/
目标：'服务器'，
/*
**页眉
**看https://nuxtjs.org/api/configuration-head
*/
负责人：{
标题：process.env.npm_包|u名称| |“”，
元：[
{charset:'utf-8'}，
{name:'viewport'，content:'width=设备宽度，初始比例=1'}，
{hid:'description'，name:'description'，content:process.env.npm_package|u description | |''}
],
链接：[
{rel:'icon'，键入：'image/x-icon'，href:'/favicon.ico'}，
{rel:'样式表'，href:'https://fonts.googleapis.com/css2?family=Lato:ital,wght@0，400；0700；0900；1400；1700&display=swap'}
]
},
/*
**全局CSS
*/
css:[
“@assets/scss/reset.scss”，
“vue material/dist/vue material.min.css”，
“vue material/dist/theme/default.css”，
“@assets/scss/global.scss”，
“@assets/scss/theme.scss”，
],
/*
**安装应用程序之前要加载的插件
** https://nuxtjs.org/guide/plugins
*/
插件：[
],
/*
**自动导入组件
**看https://nuxtjs.org/api/configuration-components
*/
组成部分：正确，
/*
**Nuxt.js开发模块
*/
构建模块：[
],
/*
**Nuxt.js模块
*/
模块：[
//文件：https://axios.nuxtjs.org/usage
“@nuxtjs/axios”，
['nuxt-vue-material'{
主题：空，
组件：['MdApp'，'MdContent'，'MdList'，'MdButton'，'MdToolbar'，]
}]
],
/*
**Axios模块配置
**看https://axios.nuxtjs.org/options
*/
axios:{}，
/*
**构建配置
**看https://nuxtjs.org/api/configuration-build/
*/
建造：{
}
}

我的项目结构如下所示：

<template>
  <div class="page-container">
    <md-app>
      <app-header />
      <md-app-content>
        <nuxt keep-alive />
      </md-app-content>
      <app-footer />
    </md-app>
  </div>
</template>

<script>
import AppFooter from "~/components/app-footer";
import AppHeader from "~/components/app-header";

export default {
  name: "default-layout",
  components: {
    AppHeader,
    AppFooter
  }
};
</script>

<style scoped lang="scss">
  .md-app {
    height: 100%;
  }
</style>

我想做的是添加一个简单的布局，其中有一个

标题
主要内容来自当前页面
，
页脚

我的
布局/default.vue
如下所示：

<template>
  <div class="page-container">
    <md-app>
      <app-header />
      <md-app-content>
        <nuxt keep-alive />
      </md-app-content>
      <app-footer />
    </md-app>
  </div>
</template>

<script>
import AppFooter from "~/components/app-footer";
import AppHeader from "~/components/app-header";

export default {
  name: "default-layout",
  components: {
    AppHeader,
    AppFooter
  }
};
</script>

<style scoped lang="scss">
  .md-app {
    height: 100%;
  }
</style>

所以它基本上只是组件和我的

因此，我在来自当前页面的内容中获得了
呈现，但这当然不是我想要的，因为我希望所有页面上都有相同的工具栏（这就是为什么我要使用布局的原因）

我的控制台没有显示错误

我的
package.json
如下所示

{
“名称”：“backen nuxt演示”，
“版本”：“1.0.0”，
“说明”：“，
“main”：“index.js”，
“脚本”：{
“测试”：“echo\”错误：未指定测试\“&退出1”，
“开发”：“nuxt”，
“构建”：“nuxt构建”，
“生成”：“nuxt生成”，
“开始”：“nuxt开始”
},
“作者”：“Tamás Kuti”，
“许可证”：“ISC”，
“依赖项”：{
“@nuxtjs/axios”：“^5.12.2”，
“nuxt”：“^2.14.6”，
“nuxt vue材质”：“^1.2.0”，
“vue材质”：“^1.0.0-beta-15”
},
“依赖性”：{
“@numxt/types”：“^2.14.7”，
“节点sass”：“^4.14.1”，
“sass加载程序”：“^10.0.3”
}
}

任何想法都将不胜感激，谢谢
 嗨，你能发送你的包.json吗？@thismyname-当然，我已经把它添加到问题中了！
<template>
  <h1>Hi there I'm the backen.de Homepage</h1>
</template>

<template>
  <div>
    <app-header />
    <h1>Hi there I'm the backen.de Homepage</h1>
  </div>
</template>

<script>
import AppFooter from "~/components/app-footer";
import AppHeader from "~/components/app-header";

export default {
  name: "index",
  components: {
    AppHeader
  }
};
</script>