Bonjour la communauté et l’équipe Dokos,
Il y a qq temps, un membre de l’équipe m’avait parlé de développer des app dans erpnext en vuejs.
Auriez-vous de la doc ou des tutos sur le sujet?
Merci de vos retours,
Thomas
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