universal-datetime-picker

npm install universal-datetime-picker

Nuxt date time picker

Nuxt 3 should register custom elements in a .client plugin and render datetime-picker tags inside ClientOnly to avoid SSR errors. This differs from a plain Vue SPA: hydration and server render never touch HTMLElement-based definitions. The snippets below show the recommended plugin + ClientOnly pattern.

Vue + custom elements in a client-only island.

Try the live demo
npm install universal-datetime-picker

Live demo

plugins/datetime-picker.client.ts

import { defineCustomElements } from "universal-datetime-picker/vue";
import "universal-datetime-picker/style.css";

export default defineNuxtPlugin(() => {
  defineCustomElements();
});

Component

<script setup lang="ts">
const date = ref<Date | null>(null);
function onChange(e: CustomEvent) {
  date.value = e.detail instanceof Date ? e.detail : null;
}
</script>

<template>
  <ClientOnly>
    <datetime-picker inline mode="date" as-string="false" @change="onChange" />
  </ClientOnly>
</template>

Notes

  • The live demo below matches /vue (same Vue island); wrap tags in ClientOnly in a real Nuxt app to avoid SSR.
  • Use a .client plugin to register elements once.

Documentation

Guides for this stack and the shared API.