how to use in Nuxt3?

[afrasiabi1374]

how to use in Nuxt3? طریقه استفاده در ناکست 3 .

[afrasiabi1374]

### plugins/datePicker.client.js

import Vue3PersianDatetimePicker from 'vue3-persian-datetime-picker'

export default defineNuxtPlugin((nuxtApp) => {
    
  const nuxtApp1 = useNuxtApp()

  const app = nuxtApp1.vueApp
  app.component('DatePicker', Vue3PersianDatetimePicker)
  app.mount('#app')
  })

in nuxt.config.ts

vite:{

    resolve: {
      mainFields: [
        'browser',
        'module
```',
        'main',
        'jsnext:main',
        'jsnext'
      ]
    }

}

[ariadev]

Here's the way I use it in Nuxt3:

import Vue3PersianDatetimePicker from 'vue3-persian-datetime-picker'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(Vue3PersianDatetimePicker, {
    name: 'CustomDatePicker',
    props: {
      format: 'YYYY-MM-DD HH:mm',
      displayFormat: 'jYYYY-jMM-jDD',
      editable: false,
      inputClass: 'form-control my-custom-class-name',
      placeholder: 'Please select a date',
      altFormat: 'YYYY-MM-DD HH:mm',
      color: '#00acc1',
      autoSubmit: false,
      //...
      //... And whatever you want to set as default.
      //...
    }
  })
})

[side-26]

Here's the way I use it in Nuxt3:

import Vue3PersianDatetimePicker from 'vue3-persian-datetime-picker'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(Vue3PersianDatetimePicker, {
    name: 'CustomDatePicker',
    props: {
      format: 'YYYY-MM-DD HH:mm',
      displayFormat: 'jYYYY-jMM-jDD',
      editable: false,
      inputClass: 'form-control my-custom-class-name',
      placeholder: 'Please select a date',
      altFormat: 'YYYY-MM-DD HH:mm',
      color: '#00acc1',
      autoSubmit: false,
      //...
      //... And whatever you want to set as default.
      //...
    }
  })
})

سلام من این کار رو کردم ولی اخطار document is not defined رو میده

[side-26]

create a file in plugin in client mode like this : fileName.client.ts then copy this script

import Vue3PersianDatetimePicker from 'vue3-persian-datetime-picker'

export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.component('DatePicker', Vue3PersianDatetimePicker) })

enjoy👌👌👌👌

[ahadihadi]

سلام. علت خطای document is not defined این است که کتابخانه مورد استفاده در سمت سرور قابل اجرا نیست (چون در سمت سرور المان window و document وجود ندارد، این المانها فقط در سمت کلاینت وجود دارند) از طرفی در هنگام ایجاد فایل پلاگین از پسوند .client.js یا .client.ts استفاده شده، بنابراین نباید خطای فوق را نمایش دهد. مشکل اینجاست که وقتی در صفحه ای که کامپوننت DatePicker استفاده شده، رفرش می‌کنیم با خطای فوق مواجه می‌شویم ولی وقتی از صفحه دیگری وارد این صفحه می‌شویم خطا رخ می‌دهد. این نشان می‌دهد که موضوع مربوط به ترتیب لود شدن کتابخانه‌ها است، بنابراین باید در نحوه import کردن کتابخانه یک شرط بگذاریم که اگر process.client بود شروع به import کن نه زودتر از آن. به این شکل:

<script setup lang="ts">
...
if (process.client) {
  const {DatePicker} = await import('vue3-persian-datetime-picker')
}
...
</script>
<template>
<DatePicker />
</template>

به این ترتیب با رفرش کردن صفحه هم خطا رخ نخواهد داد