Bonjour,
Je migre une application de vue2 à vue3.
J'ai un composant qui porte des fonctions de type watch sur différentes variables : lang, route.query, ...

Ce composant est utilisé par 4 ou 5 pages vue qui vont afficher chacune des éléments spécifiques.

J'utilise la composition API.
J'ai essayer via extends, mais sans succès.

Mon composant partagé est structuré comme suit
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export default defineComponent({
Name : "Base",
Setup() {
     const languageStateStr = computed (() => getLocale(i18n as I18n)); 
      const routeQueryLang = computed (() => route.query.lang)
 
const onLanguageChanged = () => { console.log("onLanguageChanged") }
 
   watch(routeQueryLang, onLanguageChanged, {immediate: true});
   watch(languageStateStr,onLanguageChanged);
 
 return { languageStateStr, 
               routeQueryLang, 
               onLanguageChanged
};
 }
 });
Je voudrais utiliser ce composant dans un composant du type
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { defineComponent } from "vue";
import Base from "./base";
 
export default defineComponent({
  name: "Rules",
  components: {
    Page,
    Rulebooks,
  },
  setup() {
    console.log("Rules: setup");
    const selectedType = MenuItemType.RULES;
 
    return {
      selectedType,
    };
  },
});
Comment peut-on faire pour avoir cette mutualisation ?

Merci pour vos idées !