NuxtUI Labs date picker

[proven schooner]

Im trying to create the date picker that is in the examples of the nuxtUI library but i get an error all the time that says document not defined when i try to use it also how do i properly add it to my code i think im doing it wrong

https://ui.nuxtlabs.com/getting-started/examples#datepicker

<script>
import { createClient } from '@supabase/supabase-js'
import { format } from 'date-fns';
import { DatePicker as VCalendarDatePicker } from 'v-calendar'

const supabase = createClient("supabase_url", "supabase_key")

if (!import.meta.env.SSR) {
  import('v-calendar').then((module) => {
    const { DatePicker } = module;
    app.component('DatePicker', DatePicker);
  });
}

export default {
  data() {
    return {
      data: [],
      pending: true,
      date: format(new Date(), 'EEEE, dd.MM.yyyy'),
      text: "",
      time: "",
      rating: null,
      modal: false,
    }
  },
  methods: {
    async fetchData() {
      const { data, error } = await supabase.from('journal').select('*');

      if (error) {
        console.error('Error fetching data:', error);
      } else {
        this.pending = false
        this.data = data;
      }
    },
    async addData() {
      const { data, error } = await supabase
        .from('journal')
        .insert([{ date: this.date, text: this.text, time: this.time, rating: this.rating }]);
    }
  },
  mounted() {
    this.fetchData();
  }
}
</script>

<style>
@import '~/css/style.css';
</style>