typescript - چگونه میتوانم کامپوننت را از @vueuse/component بهصورت خودکار در nuxt 3 وارد کنم

من تازه وارد Nuxt 3 هستم، میخواهم کامپوننت را بهصورت خودکار از @vueuse/component در Nuxt 3 وارد کنم، من این مستندات را دنبال کردهام اما هنوز متوجه نشدهام چرا وارد کردن خودکار کامپوننت از پکیج شخص ثالث کار نمیکند. این فایل من است nuxt.config.ts و فایل من app.vue

nuxt.config.ts

export default defineNuxtConfig({
  modules: ["@vueuse/nuxt"],
  imports: {
    presets: [
      {
        from: "@vueuse/components",
        imports: ["UseWindowSize"], // I want to auto import this, I change to `UseWindowSize` or `*` still not working
      },
    ],
  },
})

app.vue

<template>
    <UseWindowSize v-slot="{ width, height }">
          <div :style="{ height: `${height - 265}px` }"></div>
    </UseWindowSize>
  </template>

من به .nuxt/imports.d.ts نگاهی میاندازم، بله، وارد شده است

اما وقتی سعی میکنم آن را در app.vue خود فراخوانی کنم، خطایی مانند این دریافت میکنم

[Vue warn]: Failed to resolve component: UseWindowSize
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 

وقتی سعی میکنم آن را به صورت دستی داخل app.vue وارد کنم، کار میکند، آیا ممکن است که این کامپوننت به صورت خودکار به صورت جهانی وارد شود؟ ممنون..

پاسخ شماره ۱

پیشنیازها

ابتدا، @vueuse/components را با npm install --save @vueuse/components نصب کنید.

توجه: میبینم که شما حتماً قبلاً این کار را انجام دادهاید، چون میگویید که کامپوننت در صورتی که آن را به صورت دستی وارد کنید، کار میکند. با این حال آن را در راهحل قرار میدهم تا به افرادی که با مسائل مشابه روبرو هستند کمک کند، زیرا این مرحله میتواند بهراحتی نادیده گرفته شود.

در این مرحله شما میتوانید از اجزا @vueuse/components در برنامه خود استفاده کنید، اما باید آنها را به صورت دستی وارد کنید:

<template>
  <UseWindowSize v-slot="{ width, height }">
    <!-- some content -->
  </UseWindowSize>
</template>

<script lang="ts" setup>
import { UseWindowSize } from '@vueuse/components'
</script>

راهحل

بعد، بیایید واردات خودکار را فعال کنیم. یک ماژول محلی اضافه کنید که این کامپوننت را بهطور خودکار وارد کند:

// modules/importVueUseComponents/index.ts
import { addComponent, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup() {
    addComponent({
      name: 'UseWindowSize',
      export: 'UseWindowSize',
      filePath: '@vueuse/components',
    })
  },
})

... و سپس بدون وارد کردن آن از آن استفاده کنید:

// app.vue or any component in your Nuxt app, you no longer need to
// import UseWindowSize component
<template>
  <UseWindowSize v-slot="{ width, height }">
    <!-- some content -->
  </UseWindowSize>
</template>

ممکن است نیاز باشد که دوباره npm run dev را اجرا کنید تا ماژول محلی بالا کار کند. همچنین، برای هر کامپوننت از @vueuse/components که میخواهید به صورت خودکار وارد شود، باید فراخوانی مناسب addComponent را اضافه کنید.

من درک میکنم که این کامل نیست، اما فکر نمیکنم جایگزینی وجود داشته باشد. شخصاً، من همچنان این کامپوننتها را به صورت دستی وارد خواهم کرد، با این امید که ماژول nuxt @vueuse/nuxt در آینده به طور خودکار واردات را مدیریت کند.

زمینه بیشتر

من دقیقاً با همان مشکلی که تو با آن مواجه هستی دست و پنجه نرم میکردم و وقتی که در گوگل جستجو میکردم به سوال تو برخورد کردم! این باعث شد که کمی بیشتر در این مورد تحقیق کنم.

این مشکل چندین علت دارد که من سعی میکنم یکی یکی آنها را پوشش دهم.

1. @vueuse/components یک وابستگی ماژول nuxt در vueuse یعنی @vueuse/nuxt نیست. هنگام اضافه کردن ماژول @vueuse/nuxt به پروژه خود نصب نمیشود.

شما میتوانید این را با فرمان زیر بررسی کنید:

> npm list @vueuse/components
[email  /path/to/your/project
└── (empty)

در نتیجه، شما باید خودتان @vueuse/components را نصب کنید، به عنوان مثال با npm install --save @vueuse/components.

حالا شما باید قادر باشید از کامپوننتهای vueuse در برنامه خود استفاده کنید، اما باید آنها را به صورت دستی وارد کنید در فایلی که از آنها استفاده میکنید:

<template>
  <UseWindowSize v-slot="{ width, height }">
    <!-- some content -->
  </UseWindowSize>
</template>

<script lang="ts" setup>
import { UseWindowSize } from '@vueuse/components'
</script>

در مورد واردات خودکار اجزا، به خواندن نکات بعدی ادامه دهید.

2. ماژول @vueuse/nuxt به طور خودکار مؤلفه ها را وارد نمی کند. درعوض، آن را فقط به طور خودکار از @vueuse/core وارد می کند. به نظر نمی رسد یک اشکال باشد - به نظر می رسد که این ویژگی به سادگی در ماژول nuxt پیاده سازی نشده است. ما می توانیم این را با بررسی کد ماژول مشاهده کنیم.

اینکه این عمدی است یا فقط یک قصور ساده از سوی نویسندگان ماژول است، برای من واضح نیست.

3. خصوصیت imports در nuxt.config.ts فقط برای وارد کردن خودکار composables است، نه کامپوننتها - منبع. یک خصوصیت دیگر برای تنظیم وارد کردن خودکار کامپوننتها وجود دارد - components (منبع یک، منبع دو).

متأسفانه، به نظر نمیرسد این ویژگی components بتواند کامپوننتها را بهصورت خودکار از بستههای npm وارد کند. اگر بخواهیم کامپوننتها را از @vueuse/components بهصورت خودکار وارد کنیم، باید از addComponent در یک ماژول محلی (source) استفاده کنیم.

در سناریوی شما، میتوانید فایل modules/importVueUseComponents/index.ts را در پروژه خود با محتویات زیر ایجاد کنید:

import { addComponent, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup() {
    addComponent({
      name: 'UseWindowSize',
      export: 'UseWindowSize',
      filePath: '@vueuse/components',
    })
  },
})

پس از دوباره اجرای npm run dev، باید کامپوننت شما بهصورت خودکار وارد شود. امیدوارم این کمک کند!

پاسخ شماره ۲

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

بررسی مراحل

اگر میخواهید بررسی کنید چرا کار نمیکند، میتوانید این مراحل را دنبال کنید

1. بررسی کنید که آیا vueuse را نصب کردهاید: npx nuxi@latest module add vueuse یا npm i @vueuse/nuxt @vueuse/core
2. اطمینان حاصل کنید که آن را در پیکربندی تعریف کردهاید

// nuxt.config
export default defineNuxtConfig({
  modules: [
    '@vueuse/nuxt',
  ],
})

3. این قسمت را حذف کنید زیرا نیازی به وارد کردن صریح آن ندارید

imports: {
    presets: [
      {
        from: "@vueuse/components",
        imports: ["UseWindowSize"], // I want to auto import this, I change to `UseWindowSize` or `*` still not working
      },
    ],
  },

اما به یاد داشته باشید که مهم نیست چگونه پیکربندی میکنید، این روشها برای واردات خودکار غیرفعال هستند

• به مرجع
• به مراجع
• بهمقدار
• استفاده از واکشی
• استفاده از کوکی
• استفاده از سر
• استفاده از عنوان
• استفاده از ذخیرهسازی
• استفاده از تصویر

شما همیشه میتوانید از آنها با وارد کردن صریح از @vueuse/core استفاده کنید.

راه حل بهتر

من فکر میکنم هدف کد شما تعریف یک div با ارتفاع=ارتفاع پنجره - ۲۶۵ پیکسل است. اگر چنین است، ایده بهتری استفاده از css برای این کار است

height: calc(100% - 265px);

برای مرورگرهای مختلف

/* Firefox */
height: -moz-calc(100% - 265px);
/* WebKit */
height: -webkit-calc(100% - 265px);
/* Opera */
height: -o-calc(100% - 265px);
/* Standard */
height: calc(100% - 265px);