Utiliser les composants Web dans Vue 2 et 3 + API de composition

Cet article explique comment incorporer un composant Web dans une application Vue. Les exemples incluent les versions 2 et 3 de Vue, ainsi que l'API de composition. La version 3 vient d'être publiée au moment de la rédaction de cet article. Elle est si récente qu'une petite notification "New content is available" apparaît fréquemment dans la page d'accueil de la documentation. L'application de démonstration est ensuite étendue à l'utilisation de l'API Verify API de Vonage.

Test results from custom-elements-everywhere.com showing Vue 2.6.12 scored 100%, passed 16/16 Basic tests, and 14/14 advanced tests with an explanation.

Résultats des tests effectués sur custom-elements-everywhere.com

Note : Ceci est pour Vue 2. Vue 3 n'a pas été testé au moment de la publication de cet article.

Vue passe tous les tests de custom-elements-everywhere.comil obtient un score de compatibilité de 100 % et rend votre ordinateur portable heureux. En tant que développeurs, l'objectif principal n'est-il pas de rendre les ordinateurs heureux ?

Cela ne devrait pas être trop surprenant puisque dans la documentation de Vue il est indiqué :

"Vous avez peut-être remarqué que les composants Vue sont très similaires aux Custom Elements, qui font partie de la Web Components Spec. Cela s'explique par le fait que la syntaxe des composants de Vue s'inspire largement de la spécification."

Les éléments à prendre en compte lors de l'utilisation d'un composant Web dans un framework JavaScript tel que Vue. Comment le framework :

• savoir que vous utilisez un composant Web ?

• gérer le passage des données vers le composant Web ?

• gérer les événements personnalisés provenant du composant Web ?

• obtenir une référence à un composant Web afin qu'un développeur puisse accéder à des éléments tels que les méthodes du composant Web ?

Il existe de multiples façons de configurer et d'installer une application Vue. (Voir les guides pour la v2 et pour la v3.) L'exemple de code présenté dans ce billet est assez standard.

Heureusement, Vue gère les données et les événements par le biais de la syntaxe des modèles, qui reste la même dans les différentes versions.

Transmettre des données à un composant Web

Dans le précédent (/blog/using-web-components-in-a-react-application-dr), l'un des problèmes liés à l'utilisation d'un composant Web dans une application React était la façon dont React transmettait les données. Quel que soit le type de données (chaînes, tableaux, objets, booléens, etc.), React stringifie les valeurs. Pour indiquer à Vue que les données transmises ne sont pas des chaînes de caractères, v-bind ou : est utilisé comme indiqué dans la documentation.

Par exemple, pour accéder à l'espace réservé du composant clavier et le définir, ce bout de code est ajouté à la balise du composant :

:placeholder="placeholder"

Ensuite, dans la section des données de l'application Vue, la définition de la valeur initiale de l'espace réservé s'effectue de la manière suivante

placeholder: "Enter Security Code"

Pour modifier la valeur, le code est le suivant

this.placeholder = "SUCCESS!!!";

Il s'agit d'une opération standard pour une application Vue.

J'ai récemment ajouté la possibilité de personnaliser les touches dans les composants du clavier, ce qui me permettrait d'ajouter les éléments suivants à ma balise et de réorganiser le clavier :

:keys = “[‘0’,’9’,’8’,’7’,’6’,’5’,’4’,’3’,’2’,’1’,’#’,’*’]”

Un exemple sera donné dans un prochain article de blog en utilisant un autre cadre.

Écouter les événements du composant Web

Vue peut écouter les événements DOM (c.-à-d., clic, défilement, soumission, etc.) avec v-on ou l'abréviation @. Étant donné que les composants Web sont traités comme des éléments HTML ordinaires, leurs événements personnalisés fonctionneront également. Pour écouter l'événement digits-sent du composant clavier, le code ajouté à l'élément ressemblerait à ceci :

@digit-sent=”digitsSent”

digitsSent est la fonction qui va gérer ce qui sort de l'événement.

Faire savoir à Vue qu'il y a un composant Web et la manière d'interagir avec lui sont légèrement différents en fonction de la version de Vue et de l'utilisation ou non de l'API de composition. Dans tous les cas, Vue vous fera savoir si vous vous y prenez mal en affichant un avertissement dans la console.

Vue console warning that it failed to resolve a component.

Vue 2

Voir le stylo Composants Web x Vue 2 par conshus de OUR show (@conshus) sur CodePen.

Pour faire savoir à une application Vue 2 qu'un composant Web est présent, nous utilisons ignoredElements. Il s'agit d'un tableau contenant des chaînes et/ou des expressions régulières qui exposent les noms de balises des composants Web. Ce tableau ignoredElements est transmis à la configuration de Vue afin qu'elle sache qu'elle doit "ignorer" ces "éléments". Dans l'exemple de code, cela ressemble à ceci :

Vue.config.ignoredElements = [/dwanes-\w*/];

Il peut arriver que nous devions appeler la méthode d'un composant Web. Par exemple, pour effacer l'affichage du composant clavier, la méthode cancelAction est appelée. Avant de pouvoir utiliser la méthode, une référence à l'élément clavier doit être créée. Vue dispose d'une méthode similaire à celle de React pour y parvenir : en ajoutant une ref balise au composant Web.

Dans le composant clavier, cela se présente comme suit :

<dwanes-keypad ref="keypad" ...>

Ensuite, le cancelAction est appelé avec :

this.$refs.keypad.cancelAction();

Vue 3

Voir le stylo Composants Web x Vue 3 par conshus de OUR show (@conshus) sur CodePen.

Vue 3 vient de sortir ! Il est encore brillant et nouveau (et changeant) !

Comme indiqué précédemment, la syntaxe des composants Vue est vaguement basée sur la spécification des composants Web. Ainsi, l'utilisation d'un composant Web dans Vue 3 serait identique à celle de Vue 2, n'est-ce pas ? Non, pas du tout ! Il y a un changement de rupture dans le fait de faire savoir à l'application qu'un composant Web est utilisé.

Plus de détails sur ce changement sont disponibles dans le Guide de migration sous : config.ignoredElements Est maintenant config.isCustomElement
Interopérabilité des éléments personnalisés.

En résumé, le ignoredElements dans Vue 2 devient isCustomElement dans Vue 3. Au lieu d'un tableau, isCustomElement attend une fonction qui décrit ce qu'il faut rechercher. De plus, dans Vue 3, la vérification pour voir si l'élément est un élément personnalisé extérieur (c'est-à-dire un composant Web) est effectuée lors de la compilation du modèle.

Si la compilation du modèle est effectuée "à la volée", isCustomElement est passé dans la configuration de l'application. Dans le code de la démo, cela ressemble à ceci :

const app = Vue.createApp(App);
app.config.isCustomElement = tag => tag.startsWith('dwanes-')
app.mount('#app');

Si le projet comporte des fichiers .vue une étape de compilation est utilisée pour compiler l'application en un code compréhensible par le navigateur. Dans ce cas, l'option isCustomElement est passé dans les options de la bibliothèque qui effectue la compilation. La bibliothèque dépend de ce que le développeur décide d'utiliser. Dans la section suivante, le code de démonstration utilise webpack et montrera comment inclure isCustomElement dans le fichier de configuration.

Obtenir une référence à un composant Web dans Vue 3 se fait heureusement de la même manière que dans Vue 2, au moment de la rédaction de ce billet.

Composition API

L'API de composition de Vue a été créée pour aider à résoudre certaines limitations auxquelles les développeurs étaient confrontés lorsque les applications se développaient au fil du temps et devenaient plus complexes. De la documentation:

"Les API proposées dans ce RFC offrent aux utilisateurs une plus grande flexibilité dans l'organisation du code des composants. Au lieu d'être obligé de toujours organiser le code par options, le code peut maintenant être organisé en fonctions, chacune traitant d'une caractéristique spécifique. Les API facilitent également l'extraction et la réutilisation de la logique entre les composants, ou même en dehors des composants.

Je vous conseille vivement de lire la documentation de l'API Composition de composition pour mieux la comprendre. Ici, je me concentrerai sur le fonctionnement d'un composant Web. Cela concerne la manière dont la référence au composant est utilisée.

Informer une application Vue de l'existence d'un composant Web a changé de la version 2 à 3.

En fonction de la manière dont l'application compile le modèle, elle détermine où placer la configuration. Dans l'exemple précédent, la compilation du modèle a été effectuée "à la volée". Cet exemple d'API de composition utilise Webpack pour compiler le modèle. Cela signifie que la isCustomElement se trouve dans le fichier webpack.config.js . C'est là que vous trouverez ce code :

{
    test: /\.vue$/,
    use: {
        loader: "vue-loader",
        options: {
            compilerOptions: {
                isCustomElement: (tag) => {
                    return /^dwanes-/.test(tag);
                }
            }
        }
    }
}

Quel que soit le moteur de compilation, il existe probablement un fichier .config.js et c'est là que vous placerez l'extrait ci-dessus.

Dans l'API de composition, la fonction ref s'est développée pour inclure le suivi d'autres valeurs, et pas seulement des éléments DOM.

Les ref ajouté au composant clavier reste le même :

<dwanes-keypad ref="keypad" ...>

Le premier changement est que ref doit être importé :

import { ref } from 'vue';

Ensuite, la référence doit être initialisée dans la fonction setup() :

const keypad = ref(null);

Veillez à ajouter keypad à l'élément return.

Voici comment accéder à la méthode cancelAction() sur le composant :

keypad.value.cancelAction();

Veillez à prendre note des éléments suivants value.

Il en va de même pour la définition et la modification du placeholder texte.

Vonage Vuerify

Une chose que j'ai apprise en faisant des recherches pour ce billet de blog est que les projets basés sur Vue aiment le mettre dans leur nom s'ils le peuvent. Voir Vuetify, Vuex, Revue, Vuedo, etc. Alors comment pouvais-je laisser passer l'occasion de prendre l'API Vonage Verify API de Vonage de Vonage et de créer Vonage Vuerify !

Essayez-le !

Vous voulez l'essayer vous-même ? Tout d'abord, vous pouvez télécharger le code sur codesandbox.io.

Note : Vous devez être connecté.

Voici comment cela fonctionne :

La mise en place

Tout d'abord, vous aurez besoin d'un compte de développeur Vonage. Prenez note de votre clé API et de votre secret API qui se trouvent dans le tableau de bordvous aurez besoin de ces valeurs pour l'authentification.

Ensuite, dans votre nouveau projet forké codesandbox.io cliquez sur le "Panneau de contrôle du serveur".

Screen capture of codesandbox.io code editor with the icon for the server control panel circled in red with a red arrow pointing to it.

Vers le bas, il y a la section "Clés secrètes". Prenez les API Key et API Secret du tableau de bord de tableau de bord Vonage et placez-les à l'endroit approprié. Brand Name est la chaîne qui sera envoyée à l'utilisateur avec le code de sécurité. Dans ce cas, il s'agit de VonageVuerify.

Le code App.vue est presque identique à celui de l'API de composition, à l'exception de la manière dont les chiffres envoyés par le composant Web sont traités et envoyés au backend Node Express.

Demande du code de sécurité

Si l'utilisateur demande le code de sécurité, une POST est adressée au point de terminaison /request sur le serveur en envoyant le numéro de téléphone saisi dans le corps du message.

Lorsque la réponse est valide, l'ID de la demande est enregistré, le mode est modifié, le texte du clavier est modifié et l'affichage est effacé. Dans le cas contraire, une erreur est affichée.

Voici le code :

App.vue

if (mode === "request") {
    // Request security code
    postData("https://qtebx-8081.sse.codesandbox.io/request", {
    number: entered,
    })
    .then((data) => {
        if (data.status === "0") {
            requestId = data.request_id;
            mode = "verify";
            placeholder.value = "Enter verification code.";
            actionText.value = "Verify Code";
            keypad.value.cancelAction();
        } else {
            keypad.value.cancelAction();
            status.value = data.error;
        }
    })
    .catch((error) => {
        console.error("Error: ", error);
    });
}

server.js

app.post("/request", (request, response) => {
  console.log("request.body: ", request.body);
  nexmo.verify.request(
    {
      number: request.body.number,
      brand: process.env.BRAND_NAME,
      workflow_id: 6
    },
    (err, result) => {
      if (err) {
        console.error(err);
        response.json(err);
      } else {
        console.log("request result: ", result);
        if (result.status === 0) {
          response.json({
            status: result.status,
            request_id: result.request_id
          });
        } else {
          response.json({
            status: result.status,
            request_id: result.request_id,
            error: result.error_text
          });
        }
      }
    }
  );
});

Note : L'option workflow_id est la stratégie de repli utilisée pour fournir le code de sécurité à l'utilisateur. Vous trouverez les différentes options dans la documentation. Cette application utilise le Workflow 6, qui n'envoie qu'un seul SMS.

Verify the Code (vérification du code)

Lorsque l'utilisateur tente de Verify avec le code qu'il a reçu, une autre demande est envoyée à l'autorité compétente. POST est envoyée au point de terminaison /check sur le serveur avec les données requestId enregistrée précédemment et le code de sécurité.

Si l'état est positif, le mode est modifié, l'image est modifiée, le texte du composant clavier est modifié et l'affichage est effacé. Si l'état est une erreur, il est affiché.

Voici le code :

App.vue

else if (mode === "verify") {
    // verify code
    postData("https://qtebx-8081.sse.codesandbox.io/check", {
    request_id: requestId,
    code: entered,
    })
    .then((data) => {
        if (data.status === "0") {
        //verified!!!
        mode = "success";
        placeholder.value = "Woohoo!!";
        actionText.value = "SUCCESS!!!";
        image.value = {
            src: "https://media.giphy.com/media/oobNzX5ICcRZC/source.gif",
            alt: "minion giving the thumbs up",
        };
        keypad.value.cancelAction();
        } else {
        keypad.value.cancelAction();
        status.value = data.error;
        }
    })
    .catch((error) => {
        console.error("Error: ", error);
    });
}

server.js

app.post("/check", (request, response) => {
  console.log("check request.body: ", request.body);
  nexmo.verify.check(
    {
      request_id: request.body.request_id,
      code: request.body.code
    },
    (err, result) => {
      if (err) {
        console.error(err);
        response.json(err);
      } else {
        console.log("check result: ", result);
        if (result.status === 0) {
          response.json({ status: result.status });
        } else {
          response.json({ status: result.status, error: result.error_text });
        }
      }
    }
  );
});

Note : Si vous utilisez le code de la démo, les points de terminaison appelés dans le code de la démo devront être modifiés pour refléter le serveur de votre projet. App.vue devront être modifiés pour refléter le serveur de votre projet.

Pour en savoir plus sur l'API Verify de Vonage, vous pouvez consulter la documentation.

Des questions sur ce qui a été abordé dans ce billet ? Avez-vous incorporé des composants Web dans une application Vue d'une autre manière ? Vous avez un exemple d'utilisation de l'API Verify de Vonage ? Faites-le nous savoir sur notre canal Slack de la communauté.

img.alignnone { border-width : 0px !important ; }