Bonjour Thomas,
Malheureusement la documentation sur ce sujet est assez limitée, il faut lire le code existant pour en savoir plus je pense.
Dans les grandes lignes :
- créer une application avec
bench create-app - créer un bundle JavaScript (fichier nommé
blabla.bundle.js) - importer le bundle avec
frappe.require(async) - exécuter une fonction pour monter l’application
## mon_appli/hooks.py
app_include_js = [ # Avec app_include_js, ou doctype_js, ou page_js
"public/js/mon_appli/blabla/blabla.js", # Un script qui s'occupe de charger async le bundle
#"blabla.bundle.js" # Ou alors directement le bundle (qui doit s'insérer tout seul dans le DOM)
]
Le script qui vient charger à la demande le bundle, pour alléger le chargement de Dokos si le bundle n’est pas nécessaire immédiatement.
// mon_appli/public/js/blabla/blabla.js
frappe.require("blabla.bundle.js").then(() => {
// Optionnel : Créer un wrapper pour notre instance Vue
const element = document.createElement("div");
document.body.append(element); // L'insérer quelque part dans le DOM
const app = blabla.setup(element);
console.log(app);
});
Le bundle importé de manière asynchrone
// mon_appli/public/js/blabla/blabla.bundle.js
import { createApp } from "vue";
import BlaBla from "./BlaBla.vue";
frappe.provide("blabla"); // variable globale
blabla.setup = (element) => {
const app = createApp(BlaBla);
SetVueGlobals(app); // Provide `frappe` et `__` à l'instance Vue
app.mount(element);
return app;
}
Le composant Vue
// mon_appli/public/js/blabla/BlaBla.vue
<script setup>
import { ref } from "vue";
const valeur = ref(0);
</script>
<template>
<div>
<button @click="valeur++">{{ valeur }}</button>,
Langue={{ frappe.boot.lang }},
Hello={{ __("Hello") }}
</div>
</template>
Plus d’infos
https://frappeframework.com/docs/user/en/basics/asset-bundling