Projet qui ne transpile plus après migration mineure

Vue.js 3.2▸3.3, avec TypeScript

Le problème exposé dans ce sujet a été résolu.

Bonsoir,

On m’a fait découvrir les web components, et après avoir réalisé cet exemple pour Vue 2, je tente de faire de même avec celui-ci, mais pour la dernière version de Vue (le repository lié est pour la 3.2)

Le code fourni sur le repository est fonctionnel tel quel, mais ne l’est plus après avoir fait un npm update @vitejs/plugin-vue typescript vite vue : dans la partie template du component, count et count2 ne sont plus reconnus après mise à jour — et ce n’est pas juste l’IDE, au transpilage, les erreurs me sont aussi signalées.

Je n’ai manifestement pas encore assez de connaissances sur Vue pour comprendre la manière d’adapter à cela d’une quelconque manière, mais je m’oriente sur la possibilité qu’il y ait un léger mélange entre les deux APIs, composition et options. Est-ce que quelqu’un saurait me dire ce qui n’est pas/plus correct ?

Je me permets de recopier ce sujet que j’avais déjà publié ailleurs, mais sans grand succès, j’espère qu’il y a plus de connaisseurs ici.  :ange:

Merci d’avance

+0 -0

Salut, je suis aussi intéressé par les web components et Vue. J’ai regardé ton code et ton problème. Je pense que tu as raison, il y a un conflit entre les deux APIs. Il faut que tu utilises la syntaxe de la composition API pour définir tes variables réactives, comme ça :

import { defineComponent, ref } from 'vue’;

export default defineComponent({ name: 'MyTwoButtons’, setup() { const count = ref(0); const count2 = ref(0);

function increment() { count.value++; }

function increment2() { count2.value++; }

return { count, count2, increment, increment2, }; }, });

J’espère que ça va résoudre ton souci. Tiens-moi au courant si ça marche ou pas. Bon courage !

+1 -0

Ah ben effectivement, maintenant que j’ai un peu plus de temps et de recul…

Dans le code tel que montré sur le repository lié en date, il y a deux méthodes de définition de composants, mais la seconde mélange un peu les deux dans la mesure où il y a une déclaration de référence à la racine de <script> sans attribut setup, donc options API, où il devrait y avoir une méthode data() { return { count2: ref(0)}}. A mon humble avis, le "parseur" de composants est devenu plus strict entre Vue 3.2 et 3.3, ce qui fait que ce mélange ne fonctionne plus, tout du moins tel-quel.

Au point où j’en suis, prochaine étape : exposer des méthodes d’un web component au document qui l’utilise.

Merci !

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte