using on nuxt - Githubissues

SaeedP11 commented 2 years ago

<سلام ممنون از شما بابت این پروژه واقعا کارآمد ولی امکان استفاده از اون روی ناکست فراهم نیست و یه مشکل خیلی بزرگ رو برای ما بوجود آورده این موضوع خیلیل ممنون میشم کمک کنید

abotalebie commented 2 years ago

من هم برای استفاده از این کامپوننت روی Nuxt3 مشکل دارم

‍‍ ReferenceError: document is not defined at addStyle (node_modules\vue3-persian-datetime-picker\dist\vue3-persian-datetime-picker.common.js:366:22) at addStylesToDom (node_modules\vue3-persian-datetime-picker\dist\vue3-persian-datetime-picker.common.js:350:20) at addStylesClient (node_modules\vue3-persian-datetime-picker\dist\vue3-persian-datetime-picker.common.js:304:3) at Object.4635 (node_modules\vue3-persian-datetime-picker\dist\vue3-persian-datetime-picker.common.js:203:14) at __webpack_require__ (node_modules\vue3-persian-datetime-picker\dist\vue3-persian-datetime-picker.common.js:21:30) at Module.fb15 (node_modules\vue3-persian-datetime-picker\dist\vue3-persian-datetime-picker.common.js:1180:13) at __webpack_require__ (node_modules\vue3-persian-datetime-picker\dist\vue3-persian-datetime-picker.common.js:21:30) at node_modules\vue3-persian-datetime-picker\dist\vue3-persian-datetime-picker.common.js:85:18 at Object.<anonymous> (node_modules\vue3-persian-datetime-picker\dist\vue3-persian-datetime-picker.common.js:88:10) at Module._compile (node:internal/modules/cjs/loader:1105:14)

SaeedP11 commented 2 years ago

من این مشکل رو با ایجاد یه پلاگین داخل پروژه ناکست حل کردم. یه فایل داخل پوشه plugins ایجاد کنید و این کد ها رو بذارید داخلش (اسم فایل باید شامل client باشه تا سمت کلاینت ایمپورت و اجرا بشه مثلا خودم اسم فایل رو گذاشتم datetime_picker.client.ts) import { defineNuxtPlugin } from "#app"; import DatePicker from 'vue3-persian-datetime-picker' export default defineNuxtPlugin(nuxtApp => { nuxtApp.vueApp.component('DatePicker', DatePicker); })

بعدش داخل فایل nuxt.config.ts پروژه کد های زیر رو اضافه کنید. vue: { compilerOptions: { isCustomElement: (tag) => [ 'DatePicker'].includes(tag), } }

بعدش در هر کامپوننت از پروژه تون از کامپوننت Date-Picker استفاده کنید مثلا: <Date-Picker class="date" type="datetime" input-format="YYYY-MM-DD" clearable />

RezaErfani67 commented 2 years ago

@SaeedP11 آقا دستت درد نکنه منم کدها رو همونطور که شما گفتی زدم.جواب داد در نمای کنسول چنین هشداری میده:

[nitro] [dev] [unhandledRejection] TypeError: Invalid value used as weak map key
    at WeakMap.set (<anonymous>)
    at normalizePropsOptions (D:\nuxt\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:3966:11)
    at createComponentInstance (D:\nuxt\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:6957:23)
    at renderComponentVNode (D:\nuxt\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:171:22)
    at Module.ssrRenderComponent (D:\nuxt\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:608:12)
    at file:///D:/nuxt/.nuxt/dist/server/server.mjs:3825:37
    at renderFnWithContext (D:\nuxt\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:847:21)
    at ssrRenderSlotInner (D:\nuxt\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:624:21)
    at Module.ssrRenderSlot (D:\nuxt\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:614:5)
    at _sfc_ssrRender (file:///D:/nuxt/.nuxt/dist/server/server.mjs:4006:25)

ظاهرا کد زیر جواب نمیده

    vue: { compilerOptions: { isCustomElement: (tag) => ['DatePicker'].includes(tag), } }

سوال دوم اینکه: این اطلاعات رو از کجا بدست آوردید. آیا در جایی از مستندات بهش اشاره شده؟ بیزحمت بیشتر راهنمایی کنید. ممنون

SaeedP11 commented 2 years ago

@RezaErfani67

در مورد اینکه چجوری تونستم این مشکل رو حل کنم باید بگم که با خوندن داکیومنت ناکست تونستم پلاگین سمت کلاینت (چون مسلما اگه این پلاگین سمت سرور ایمپورت بشه با همون ارور document not found برخورد میکنیم ) رو بنویسم. vue: { compilerOptions: { isCustomElement: (tag) => ['DatePicker'].includes(tag), } } بعدش هم برای اینکه این کامپوننت بصورت گلوبال قابل دسترسی باشه قطعه کد رو داخل فایل کانفیگ ناکس نوشتم.

در مورد مشکلتون هم بگم که من خودم دیگه به مشکلی نخوردم و حتی بجز این ماژول براحتی تونستم با همین راه حل بقیه ماژول ها (مثلا Quill Editor یا MathLive ) رو بیارم بالا

این رو هم بگم که من از Nuxt 3 استفاده میکنم ... اگر از Nuxt 2 استفاده میکنید یه سرچ بزنید که چجوری میتونید custom component اضافه کنید

RezaErfani67 commented 2 years ago

ممنون از توضیحات خوبتون... برنامه من به درستی ران میشه.و به درستی هم کار میکنه. اما فقط در ترمینال میاد یه هشدار کوچولو میده که میگه باید از قسمت compilerOptions.isCustomeElement درستش کنی. کد شما رو بررسی کردم متوجه شدم که شما به جای عبارت "Date-Picker" بایستی عبارت "DatePicker" رو در قطعه کد زیر قرار بدید. کدی که الان نوشتید، اصلا عبارت { Date-Picker } را پیدا نمیکند که بخواهد به کاستوم المنت تبدیلش کند.بنابراین برنامه اروری نمیده :)

        <Date-Picker class="date" v-model="date" input-format="YYYY-MM-DD" />

باید تبدیل شود به:

        <DatePicker class="date" v-model="date" input-format="YYYY-MM-DD" />

در کل ولی راه خوبی بود و بسیاری از مشکلاتم رو حل کرد و چند تا کامپوننت دیگه رو هم همینطوری دارم استفاده میکنم. دم شما گرم

talkhabi / vue3-persian-datetime-picker

using on nuxt #12