Vuetify v-autocomplete完全不渲染、无显示问题求助

在Nuxt.js项目的TestPage组件中编写了v-autocomplete代码，但页面仅显示Home和Footer，该组件完全未渲染，HTML结构中也无对应元素。已确认package.json的devDependencies包含@nuxtjs/vuetify@^1.12.3。

组件代码 #

<template>
  <div>
    <v-autocomplete
        label="Autocomplete"
        :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
    ></v-autocomplete>
  </div>
</template>

<script>
export default {
name: "TestPage"
}
</script>

<style scoped>

</style>

依赖配置片段 #

"devDependencies": {
    ...
    "@nuxtjs/vuetify": "^1.12.3",
    ...
}

可能的原因及解决方法 #

• 未正确启用Vuetify模块
  仅安装依赖不足以让Vuetify生效，需在nuxt.config.js中注册模块。检查配置文件是否包含以下代码，没有则添加后重启开发服务：

  modules: [
    '@nuxtjs/vuetify'
  ]
  

• 组件未正确挂载到路由/页面

  • 若TestPage是页面组件，需放在项目的pages/目录下，Nuxt会自动生成对应路由；
  • 若TestPage是自定义组件，需在目标页面中导入并注册使用，示例：

    <template>
      <div>
        <TestPage />
      </div>
    </template>
    <script>
    import TestPage from '@/components/TestPage.vue'
    export default {
      components: { TestPage }
    }
    </script>
    

• 版本兼容性问题
  @nuxtjs/vuetify@1.12.3仅适配Nuxt 2.x版本，若项目是Nuxt 3会出现兼容问题。需升级Vuetify模块到适配Nuxt 3的版本（如@nuxtjs/vuetify@^2.0.0），或降级Nuxt到2.x版本。

• 组件路径/名称错误
  检查组件文件名是否为TestPage.vue、导入路径是否拼写正确，避免大小写或路径错误导致组件无法加载。

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