Nuxt Vue 单模板中添加多个组件后无显示该如何解决？

修复方案 #

核心原因 #

1. Nuxt 中 pages 目录下的文件为路由默认入口，未在 pages/index.vue 中正确引入并渲染 home 组件，是页面无内容的最常见原因
2. 自定义组件命名和原生HTML标签重名，Input、List 都是原生DOM标签名，Vue会优先将其解析为原生标签，不会渲染自定义组件内容
3. TypeScript 相关依赖或配置缺失，导致组件脚本执行报错，阻断渲染

具体操作步骤 #

1. 配置路由入口文件 pages/index.vue，正确引入并渲染Home组件：

<template>
  <Home />
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator';
import Home from '~/components/home/index.vue';

@Component({
  components: {
    Home
  }
})
export default class Index extends Vue {}
</script>

2. 修改自定义组件命名，避免和原生标签冲突，将 input/index.vue 对应组件重命名为 AppInput，list/index.vue 对应组件重命名为 AppList，同步修改 components/home/index.vue 代码：

<template>
  <div>
    <AppInput/>
    <AppList/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator';
import AppInput from '~/components/input/index.vue';
import AppList from '~/components/list/index.vue';

@Component({
  layout: 'default',
  components: {
    AppInput,
    AppList,
  },
})
export default class Home extends Vue {}
</script>

3. 检查TypeScript相关配置与依赖：

• 确保已安装 @nuxt/typescript-build、nuxt-property-decorator、typescript 依赖
• 在 nuxt.config.js 中开启TypeScript支持：

export default {
  // 其余配置保持不变
  buildModules: [
    '@nuxt/typescript-build'
  ]
}

4. 打开浏览器开发者工具控制台，查看是否有报错信息，根据报错提示排查路径错误、组件导出错误等其他问题。

内容的提问来源于stack exchange，提问作者jpskgc