Utiliser Vue dans une page du bureau

On crée une Page, un composant Vue et un bundle. Au chargement, le bundle est requis et monté. Le mode développeur peut recharger à chaud.

1 min de lectureMis à jour le 5 octobre 2026Source : docs.frappe.io

Pourquoi

Une page du bureau (Desk) peut utiliser la réactivité de Vue et les appels serveur, sans configurer une application Vue à part. L’API de la page est dans API Page.

Page

Dans le DocType Page (/app/page), créez une entrée. Des fichiers apparaissent dans le module choisi. Pour test_vue : __init__.py, test_vue.json et test_vue.js. Le JavaScript appelle frappe.ui.make_app_page avec le parent, le titre None et single_column: true. La route /app/test-vue affiche alors une page vide titrée None.

Fichiers Vue

Frappe transpile et empaquette les .vue. Sous public/js, l’exemple place TestVue.vue et test_vue.bundle.js. Le composant affiche un ref « Hello, World ». Le bundle importe createApp, monte le composant sur l’élément du wrapper, et expose frappe.ui.setup_vue.

Charger

Dans le test_vue.js généré, on_page_load crée la page avec le titre Test Vue. Si frappe.boot.developer_mode est vrai, un rappel est poussé dans frappe.hot_update pour rappeler load_vue. La ligne publiée frappe.hot_update ??= frappe.hot_update ne change pas la valeur. on_page_show appelle aussi load_vue.

load_vue vide .layout-main-section, attend frappe.require("test_vue.bundle.js"), puis frappe.ui.setup_vue sur ce conteneur. Le résultat est gardé dans frappe.test_vue_app.

Construire

bench build reconstruit le front de toutes les applications du bench. Pour surveiller une application, depuis bench/apps/frappe :

terminal

npm run build -- --apps app --watch

Le navigateur recharge à chaud. La page doit afficher le message du composant.

Point d’attention

Le bundle doit s’appeler comme l’argument de frappe.require. bench build ne se limite pas à l’application en cours. Le titre initial None vient du fichier généré : l’exemple le remplace par Test Vue au moment du chargement Vue.