Comment enregistrer des directives personnalisées dans Nuxt 3

TL;DR

Créez un fichier de plugin dans votre répertoire plugins/, où nous aurons accès à notre instance d'application Vue.

Nous pouvons y définir et enregistrer notre directive personnalisée :

// ~/plugins/my-directives.ts
export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.directive('highlight', {
        mounted(el, binding) {
            el.style.backgroundColor = binding.value
        }
    });

    // Register more directives as needed
});

En détails

Dans Vue, les directives sont des attributs spéciaux sur les éléments HTML qui sont utilisés pour étendre et manipuler leur comportement. Vue fournit plusieurs directives intégrées :

• v-bind - utilisé pour lier dynamiquement un attribut à une expression JavaScript,
• v-on - utilisé pour attacher des écouteurs d'événements aux éléments,
• v-if/v-else-if/v-else - utilisé pour rendre des éléments de manière conditionnelle,
• et bien plus encore.

Pour des cas d'utilisation plus spécifiques et avancés, Vue fournit un moyen de créer des directives personnalisées. Ceux-ci peuvent être particulièrement utiles pour les manipulations DOM de niveau inférieur.

Dans une application Plain Vue, pour enregistrer des directives personnalisées au niveau de l'application, nous pouvons l'attacher à notre instance d'application en tant que telle :

const app = creatApp({});

app.directive('highlight', {
    mounted(el, binding) {
        el.style.backgroundColor = binding.value
    }
});

Nous pouvons ensuite utiliser la directive sur n'importe quel élément globalement au sein de notre application :

<p v-highlight="'yellow'">This text will be highlighted!</p>

Et dans Nuxt ?

Pour obtenir la même fonctionnalité dans Nuxt, nous aurons besoin d'accéder à notre instance d'application Vue, et nous pouvons utiliser un plugin pour le faire.

Les plugins de Nuxt peuvent être utilisés pour ajouter des fonctionnalités à une application au niveau de l'application Vue. Ils sont chargés et exécutés lors de la création de l'application Vue, et les fichiers contenus dans le répertoire plugins/ d'une application Nuxt sont automatiquement enregistrés en tant que plugins par Nuxt.

Dans Nuxt, nous pouvons créer un fichier plugin dans le répertoire plugins/, que nous pouvons utiliser pour définir et enregistrer globalement nos directives personnalisées :

// ~/plugins/my-directives.ts
export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.directive('highlight', {
        mounted(el, binding) {
            el.style.backgroundColor = binding.value
        }
    });

    // Register more directives as needed
});

Notre fonction plugin a accès au contexte de l'application Nuxt, qui possède une propriété vueApp contenant notre instance d'application Vue. Nous pouvons directement enregistrer nos directives sur cette propriété et les rendre disponibles dans le monde entier via notre application.

Il est important de noter que, pour éviter les problèmes de rendu côté serveur (SSR), notre fichier de plugin ne doit pas contenir de suffixe .client ou .server lorsqu'il est utilisé pour enregistrer des directives.

C'est tout. Merci d'avoir lu.

?‍? Connectons-nous › Twitter · GitHub · LinkedIn

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!