I'm encountering some difficulties while attempting to integrate github/relative-time-element with Nuxt 3.11.2 and Nitro 2.9.6.
This is my current progress:
- I added the library through the command:
$ npm install @github/time-elements. - I adjusted nuxt.config.ts in the following manner:
export default defineNuxtConfig({
...
vue: {
compilerOptions: {
isCustomElement: (tag) => tag.startsWith('relative-time')
}
},
...
})
- I also tried creating a basic component
components/atom/TimeRelative.vue:
<script setup>
// TimeRelative.vue
import { ref, computed } from 'vue';
import { onMounted } from 'vue';
import '@github/time-elements/dist/relative-time-element.js';
onMounted(() => {
});
const props = defineProps({
time: String,
class: String
});
</script>
<template>
<ClientOnly>
<relative-time datetime="2014-04-01T16:30:00-08:00" tense="past" format="relative" prefix="this happened on">
April 1, 2014
</relative-time>
</ClientOnly>
</template>
An error occurs stating that the package cannot be located: (although it exists)
ERROR Internal server error: Missing "./dist/relative-time-element.js" specifier in "@github/time-elements" package 3:49:06 PM
Plugin: vite:import-analysis
File: /.../components/atoms/TimeRelative.vue
- If I attempt to import the file using:
import '~/node_module/@github/time-elements/dist/relative-time-element.js';
No error is thrown, but there is also no change — the HTML displays as if the component was not transformed at all.
What is the correct method to incorporate this package within Nuxt 3?
Appreciate your assistance!