typescript - Πώς μπορώ να κάνω αυτόματο import component από το @vueuse/component στο nuxt 3

Είμαι καινούριος στο nuxt 3, θέλω να εισάγω αυτόματα το component από το @vueuse/component στο nuxt 3, ακολουθώ αυτή την τεκμηρίωση αλλά ακόμα δεν καταλαβαίνω γιατί η αυτόματη εισαγωγή component από τρίτο πακέτο δεν λειτουργεί. Αυτά είναι τα αρχεία μου 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 λειτουργεί, είναι δυνατόν το component να εισάγεται αυτόματα παγκοσμίως; Ευχαριστώ..

Απάντηση #1

ΠΡΟΑΠΑΙΤΟΥΜΕΝΑ

Πρώτα, εγκαταστήστε το @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>

Η ΛΥΣΗ

Στη συνέχεια, ας κάνουμε τα αυτόματα import να λειτουργούν. Προσθέστε ένα τοπικό module που θα κάνει αυτόματα import αυτό το component:

// 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 ώστε το παραπάνω τοπικό module να λειτουργήσει. Επίσης, θα χρειαστεί να προσθέσετε την κατάλληλη κλήση addComponent για κάθε component από @vueuse/components που θέλετε να εισάγεται αυτόματα.

Καταλαβαίνω ότι δεν είναι τέλειο, αλλά δεν νομίζω ότι υπάρχει εναλλακτική. Προσωπικά, θα συνεχίσω απλώς να εισάγω αυτά τα στοιχεία χειροκίνητα, ελπίζοντας ότι το module του nuxt @vueuse/nuxt θα αναλάβει τα αυτόματα imports στο μέλλον.

ΠΕΡΙΣΣΟΤΕΡΟ ΠΛΑΙΣΙΟ

Αντιμετώπιζα ακριβώς το ίδιο πρόβλημα με αυτό που αντιμετωπίζεις, και έπεσα πάνω στην ερώτησή σου όταν έκανα αναζήτηση στο Google! Με ενέπνευσε να ερευνήσω λίγο περισσότερο σχετικά με αυτό.

Αυτό το ζήτημα έχει πολλαπλές αιτίες, τις οποίες θα προσπαθήσω να καλύψω μία προς μία.

  1. @vueuse/components δεν είναι εξάρτηση του Nuxt module του vueuse @vueuse/nuxt. ΔΕΝ εγκαθίσταται όταν προσθέτετε το module @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>

Όσον αφορά τις αυτόματες εισαγωγές των στοιχείων, συνεχίστε να διαβάζετε τα επόμενα σημεία.

  1. Το @vueuse/nuxt module δεν εισάγει αυτόματα components. Αντίθετα, εισάγει αυτόματα μόνο composables από το @vueuse/core. Δεν φαίνεται να είναι κάποιο σφάλμα - φαίνεται απλώς ότι δεν έχει υλοποιηθεί στο nuxt module. Μπορούμε να το δούμε κατά την επιθεώρηση του κώδικα του module εδώ.

Δεν μου είναι σαφές αν αυτό είναι σκόπιμο ή απλή παράβλεψη από τους συγγραφείς του μοντέλου.

  1. Η ιδιότητα imports στο nuxt.config.ts είναι μόνο για αυτόματο εισαγωγή composables, όχι components - πηγή. Υπάρχει μια άλλη ιδιότητα για ρύθμιση αυτόματου εισαγωγής components - components (πηγή μία, πηγή δύο).

Δυστυχώς, αυτή η ιδιότητα components δεν φαίνεται να μπορεί να εισάγει αυτόματα components από πακέτα npm. Εάν θέλουμε να εισάγουμε αυτόματα components από το @vueuse/components, χρειάζεται να χρησιμοποιήσουμε το addComponent σε ένα τοπικό module (πηγή).

Στο σενάριό σας, θα μπορούσατε να δημιουργήσετε το αρχείο 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, το στοιχείο σας θα πρέπει να εισαχθεί αυτόματα. Ελπίζω αυτό να βοηθήσει!

Απάντηση #2

Παρόλο που δεν νομίζω ότι το Vueuse είναι η καλύτερη λύση για εσένα. Αλλά θα σου δώσω παρ' όλα αυτά τα βήματα για να το φτιάξεις και τη προτεινόμενη λύση για εσένα.

Έλεγχος Βημάτων

Αν θέλεις να ελέγξεις γιατί δεν λειτουργεί, μπορείς να ακολουθήσεις αυτά τα βήματα

  1. Ελέγξτε αν έχετε εγκαταστήσει το vueuse: npx nuxi@latest module add vueuse ή npm i @vueuse/nuxt @vueuse/core
  2. Βεβαιωθείτε ότι το έχετε ορίσει στο config
// nuxt.config
export default defineNuxtConfig({
  modules: [
    '@vueuse/nuxt',
  ],
})
  1. Αφαίρεσε αυτό το μέρος γιατί δεν χρειάζεται να το εισάγεις ρητά
imports: {
    presets: [
      {
        from: "@vueuse/components",
        imports: ["UseWindowSize"], // I want to auto import this, I change to `UseWindowSize` or `*` still not working
      },
    ],
  },

Αλλά θυμήσου ότι ανεξάρτητα από το πώς ρυθμίζεις, αυτές οι μέθοδοι είναι απενεργοποιημένες για αυτόματη εισαγωγή

  • σεΑναφορά
  • σεΑναφορές
  • στηΝιμή
  • χρήσηΑνάκτησης
  • Χρησιμοποιώ το Cookie
  • χρησιμοποιώΚεφάλι
  • χρήσηΤίτλου
  • χρήσηΑποθήκευσης
  • χρήσηΕικόνας

Μπορείτε πάντα να τα χρησιμοποιείτε κάνοντας ρητή εισαγωγή από @vueuse/core.

Καλύτερη Λύση

Νομίζω ότι ο σκοπός του κώδικά σας είναι να ορίσετε ένα div με ύψος=ύψος παραθύρου - 265px. Αν ισχύει αυτό, η καλύτερη ιδέα είναι να χρησιμοποιήσετε 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);