elreco / vue-tailwind-datepicker

A Vue 3 Datepicker using Tailwind CSS
https://vue-tailwind-datepicker.com
MIT License
233 stars 44 forks source link

Adding to nuxt3 #14

Closed mathijsfr closed 1 year ago

mathijsfr commented 1 year ago

Describe the bug Adding vue-tailwind-datepicker in the same way as litepie-datepicker into nuxt3 project fails.

To Reproduce Steps to reproduce the behavior:

  1. Install vue tailwind datepicker
  2. Add it as plugin:
import VueTailwindDatepicker from 'vue-tailwind-datepicker';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(VueTailwindDatepicker)
})
  1. Add it as component:
<template>
  <div class="flex">
    <vue-tailwind-datepicker
      i18n="nl"
      :shortcuts="customShortcuts"
      placeholder="Laatste 28 dagen"
      :disable-date="dDate"
      :formatter="formatter"
      separator=" t/m "
      :modelValue="props.modelValue"
      @update:modelValue="emit('update:modelValue', $event)"
    />
  </div>

</template>

<script setup>
import { ref } from 'vue';

const emit = defineEmits(['update:modelValue'])

const props = defineProps({
  modelValue: Object,
})

const formatter = ref({
  date: 'DD MMM YYYY',
  month: 'MMM'
});

const dDate = (date) => {
  return date > new Date();
}

const customShortcuts = () => {
      return [
        {
          label: 'Vandaag',
          atClick: () => {
            const date = new Date();
            return [
              date,
              date
            ];
          }
        },
        {
          label: 'Gisteren',
          atClick: () => {
            const date = new Date();
            let yesterday = date.setDate(date.getDate() - 1)
            return [
              yesterday,
              yesterday
            ];
          }
        },
        {
          label: 'Afgelopen 7 dagen',
          atClick: () => {
            const date = new Date();
            return [
              new Date(date.setDate(date.getDate() - 7)),
              new Date()
            ];
          }
        },
        {
          label: 'Afgelopen 28 dagen',
          atClick: () => {
            const date = new Date();
            return [
              new Date(date.setDate(date.getDate() - 28)),
              new Date()
            ];
          }
        },
        {
          label: 'Vorige week',
          atClick: () => {
            const date = new Date();
            // +1 to get monday and -7 to get previous week
            let prevDay = new Date(date.setDate(date.getDate() - date.getDay() + 1 - 7));
            return [
              new Date(date.setDate(date.getDate() - date.getDay() + 1 - 7)),
              prevDay.setDate(date.getDate() + 6)
            ];
          }
        },
        {
          label: 'Vorige maand',
          atClick: () => {
            const date = new Date();
            return [
              new Date(date.getFullYear(), date.getMonth() - 1, 1),
              new Date(date.getFullYear(), date.getMonth(), 0)
            ];
          }
        },
        {
          label: 'Vorig jaar',
          atClick: () => {
            const date = new Date();
            return [
              new Date(date.getFullYear() - 1, 0, 1),
              new Date(date.getFullYear(), 0, 0)
            ];
          }
        },
        {
          label: 'Deze maand',
          atClick: () => {
            const date = new Date();
            return [
              new Date(date.getFullYear(), date.getMonth(), 1),
              date
            ];
          }
        },
        {
          label: 'Dit jaar',
          atClick: () => {
            const date = new Date();
            return [
              new Date(date.getFullYear(), 0, 1),
              date
            ];
          }
        }
      ];
    }
</script>
  1. See error
[nuxt] [request error] Invalid URL ()
  at async $fetchRaw2 (<dir>/node_modules/ohmyfetch/dist/chunks/fetch.mjs:131:20)
  at async default (<dir>/node_modules/@nuxt/vite-builder/dist/runtime/vite-node.mjs:16:23)
  at async Object.renderToString (<dir>/node_modules/vue-bundle-renderer/dist/index.mjs:264:19)
  at async <dir>/.nuxt/dev/index.mjs:465:20
  at async <dir>/node_modules/h3/dist/index.mjs:420:19
  at async Server.nodeHandler (<dir>/node_modules/h3/dist/index.mjs:370:7)

When looking at editor warning: Argument type of VueTailwindDatePicker is not assignable to parameter type plugin_2

Expected behavior Expect to not have run errors.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop & mobile (please complete the following information):

elreco commented 1 year ago

@mathijsfr can you try to install 3.0.0-rc.13 please?