Nuxt 3.11中如何正确导入@github/time-elements组件？

1. 确认依赖安装 #

你执行的安装命令无误：

npm install @github/time-elements

2. 配置Vue编译器识别自定义元素 #

在nuxt.config.ts中添加编译配置，让Vue将relative-time及其他time-elements系列标签识别为Web Component（而非Vue组件）：

export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      // 匹配所有time-elements相关标签
      isCustomElement: tag => tag.startsWith('relative-time') || tag.startsWith('time-')
    }
  }
})

3. 正确导入Web Component定义 #

你之前遇到的导入路径错误，是因为包的模块结构更新，无需指定dist下的具体文件，直接导入包本身即可，两种实现方式可选：

方式一：全局注册（推荐） #

新建plugins/time-elements.ts插件文件，导入包完成全局注册：

import '@github/time-elements'

export default defineNuxtPlugin(() => {})

插件会在Nuxt启动时自动执行，整个项目可直接使用<relative-time>等标签。

方式二：组件内局部导入 #

仅在特定组件中使用时，在TimeRelative.vue内直接导入：

<template>
  <relative-time :datetime="datetime" format="relative"></relative-time>
</template>

<script setup lang="ts">
import '@github/time-elements'

const props = defineProps<{
  datetime: string
}>()
</script>

4. 验证使用 #

在页面或组件中直接使用标签即可，示例：

<relative-time datetime="2024-01-01T00:00:00Z"></relative-time>

页面会自动渲染出相对时间的Web Component，完成时间转换逻辑。

常见问题排查 #

• 修改nuxt.config.ts后需重启Nuxt开发服务器，配置才会生效；
• 不要用v-html渲染<relative-time>标签，Vue不会解析v-html中的自定义元素，直接在模板中书写标签即可；
• 若仍未生效，检查浏览器控制台是否有Web Component相关报错，确认导入语句无拼写错误。

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