Nuxt

Try the live Nuxt demo for interactive picker and copy-paste snippets.

Support tier

Full support through the Vue Web Components path. Register in a *.client.ts plugin with defineCustomElements from universal-datetime-picker/vue, and wrap tags in ClientOnly.

Install + deps

npm install universal-datetime-picker

Nuxt 3 / Vue 3. React peers are not required.

Setup

Custom element classes cannot run during SSR. Use a client-only plugin for registration, mark datetime-picker* as custom elements in nuxt.config, and render pickers inside ClientOnly.

Exact import path

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

Minimal example

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

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

// nuxt.config.ts
export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      isCustomElement: (tag) => tag.startsWith("datetime-picker"),
    },
  },
});

<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>

Realistic example

<script setup lang="ts">
const start = ref<Date | null>(null);

function onChange(e: CustomEvent) {
  start.value = e.detail instanceof Date ? e.detail : null;
}

function onOpenChange(e: CustomEvent) {
  console.log("open", e.detail);
}
</script>

<template>
  <ClientOnly fallback-tag="div" fallback="Loading picker...">
    <datetime-picker-input
      placeholder="Arrival"
      as-string="false"
      @change="onChange"
      @openchange="onOpenChange"
    />
    <p v-if="start">Arrival: {{ start.toLocaleString() }}</p>
  </ClientOnly>
</template>

Configuration notes

Plugin filename must end with .client.ts so registration never runs on the server.
Import path is universal-datetime-picker/vue, same as a plain Vue SPA. There is no ./nuxt export.
Set vue.compilerOptions.isCustomElement in nuxt.config to silence unresolved component warnings.
Attribute names stay kebab-case on the custom elements.

Events

@change with value in event.detail
@openchange with open boolean in event.detail

Customization links

Pitfalls

Rendering tags outside ClientOnly can crash SSR or hydrate with empty stubs.
A non-.client plugin that calls defineCustomElements fails on the server.
Importing from the React main entry in Nuxt pulls optional React peers you do not need.

Troubleshooting

SSR and Vue CE warnings are covered in Troubleshooting.