[{"data":1,"prerenderedAt":422},["ShallowReactive",2],{"\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fchamp-vue-component":3,"section:\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fchamp-vue-component":421},{"id":4,"title":5,"body":6,"description":407,"extension":408,"meta":409,"navigation":410,"path":417,"seo":418,"stem":419,"__hash__":420},"docs\u002F2.next\u002F3.dodock\u002F10.developpeurs\u002Fchamp-vue-component.md","Champ « Composant Vue »",{"type":7,"value":8,"toc":399},"minimark",[9,13,22,25,41,46,74,78,81,103,110,223,226,231,234,245,248,252,255,361,365,392,395],[10,11,5],"h1",{"id":12},"champ-composant-vue",[14,15,16,17,21],"p",{},"Le type de champ « ",[18,19,20],"strong",{},"Composant Vue"," » affiche une île Vue publiée par une application directement dans le formulaire d'un document. L'île reçoit une copie du document et se met à jour au fur et à mesure des modifications de l'utilisateur, y compris avant l'enregistrement.",[14,23,24],{},"Le champ est réservé à l'affichage, comme le type « HTML » :",[26,27,28,32,35,38],"ul",{},[29,30,31],"li",{},"il ne crée pas de colonne en base de données et ne stocke aucune valeur ;",[29,33,34],{},"l'île reçoit une copie du document (tables enfants comprises) et ne renvoie jamais de valeur vers le document ;",[29,36,37],{},"le champ reste visible lorsqu'il est vide et en lecture seule : il n'est pas masqué par le paramètre d'affichage qui masque les champs vides en lecture seule ;",[29,39,40],{},"le champ ne possédant aucune valeur, il est ignoré lors des imports de données.",[42,43,45],"h2",{"id":44},"prérequis","Prérequis",[26,47,48,66],{},[29,49,50,51,56,57,61,62,65],{},"Une application installée sur le site publie une île Vue (voir ",[52,53,55],"a",{"href":54},"\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Files","Îles Vue","). Son nom suit le format ",[58,59,60],"code",{},"application.nom_de_lile",", par exemple ",[58,63,64],{},"mon_appli.apercu_facture"," (exemple fictif).",[29,67,68,69,73],{},"Les composants créés dans ",[52,70,72],{"href":71},"\u002Fnext\u002Fdodock\u002Fpersonnalisation\u002Fstudio","Studio"," ne sont pas publiés en tant qu'îles : ils ne peuvent pas être utilisés avec ce type de champ.",[42,75,77],{"id":76},"créer-un-champ-composant-vue","Créer un champ « Composant Vue »",[14,79,80],{},"Le type « Composant Vue » figure dans la liste des types de champ :",[26,82,83,90,96],{},[29,84,85,86,89],{},"du ",[18,87,88],{},"DocType",", dans le code de l'application ;",[29,91,85,92,95],{},[18,93,94],{},"champ personnalisé"," ;",[29,97,98,99,102],{},"de la ",[18,100,101],{},"personnalisation de formulaire",".",[14,104,105,106,109],{},"Renseignez le champ ",[18,107,108],{},"Options"," avec le nom exact de l'île, de la même manière qu'un champ « Lien » indique un type de document :",[111,112,117],"pre",{"className":113,"code":114,"language":115,"meta":116,"style":116},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"fieldname\": \"apercu_facture\",\n  \"label\": \"Aperçu\",\n  \"fieldtype\": \"Vue Component\",\n  \"options\": \"mon_appli.apercu_facture\"\n}\n","json","",[58,118,119,128,156,177,198,217],{"__ignoreMap":116},[120,121,124],"span",{"class":122,"line":123},"line",1,[120,125,127],{"class":126},"sMK4o","{\n",[120,129,131,134,138,141,144,147,151,153],{"class":122,"line":130},2,[120,132,133],{"class":126},"  \"",[120,135,137],{"class":136},"spNyl","fieldname",[120,139,140],{"class":126},"\"",[120,142,143],{"class":126},":",[120,145,146],{"class":126}," \"",[120,148,150],{"class":149},"sfazB","apercu_facture",[120,152,140],{"class":126},[120,154,155],{"class":126},",\n",[120,157,159,161,164,166,168,170,173,175],{"class":122,"line":158},3,[120,160,133],{"class":126},[120,162,163],{"class":136},"label",[120,165,140],{"class":126},[120,167,143],{"class":126},[120,169,146],{"class":126},[120,171,172],{"class":149},"Aperçu",[120,174,140],{"class":126},[120,176,155],{"class":126},[120,178,180,182,185,187,189,191,194,196],{"class":122,"line":179},4,[120,181,133],{"class":126},[120,183,184],{"class":136},"fieldtype",[120,186,140],{"class":126},[120,188,143],{"class":126},[120,190,146],{"class":126},[120,192,193],{"class":149},"Vue Component",[120,195,140],{"class":126},[120,197,155],{"class":126},[120,199,201,203,206,208,210,212,214],{"class":122,"line":200},5,[120,202,133],{"class":126},[120,204,205],{"class":136},"options",[120,207,140],{"class":126},[120,209,143],{"class":126},[120,211,146],{"class":126},[120,213,64],{"class":149},[120,215,216],{"class":126},"\"\n",[120,218,220],{"class":122,"line":219},6,[120,221,222],{"class":126},"}\n",[14,224,225],{},"Dans le constructeur de formulaire, les options d'un champ « Composant Vue » proposent directement la liste des îles disponibles sur le site, et un aperçu du champ est affiché.",[227,228,230],"h3",{"id":229},"validation-à-lenregistrement","Validation à l'enregistrement",[14,232,233],{},"Lors de l'enregistrement d'un DocType, d'un champ personnalisé ou d'une personnalisation de formulaire, le champ est vérifié :",[26,235,236,242],{},[29,237,238,239,95],{},"le champ ",[18,240,241],{},"Options est obligatoire",[29,243,244],{},"le nom indiqué doit correspondre à une île publiée sur le site, sinon l'enregistrement est refusé.",[14,246,247],{},"Cette vérification n'est pas exécutée pendant les correctifs (patches), l'import des fixtures ou l'installation d'une application. Si l'île devient indisponible après la création du champ, le formulaire affiche à sa place le message « \"{0}\" is not available on this site. ». Le reste du formulaire fonctionne normalement.",[42,249,251],{"id":250},"propriétés-reçues-par-lîle","Propriétés reçues par l'île",[14,253,254],{},"L'île montée dans le formulaire reçoit les propriétés suivantes :",[256,257,258,274],"table",{},[259,260,261],"thead",{},[262,263,264,268,271],"tr",{},[265,266,267],"th",{},"Propriété",[265,269,270],{},"Type",[265,272,273],{},"Description",[275,276,277,293,312,327,345],"tbody",{},[262,278,279,285,290],{},[280,281,282],"td",{},[58,283,284],{},"doctype",[280,286,287],{},[58,288,289],{},"string",[280,291,292],{},"Type de document du formulaire",[262,294,295,300,305],{},[280,296,297],{},[58,298,299],{},"name",[280,301,302],{},[58,303,304],{},"string | null",[280,306,307,308,311],{},"Nom du document, ",[58,309,310],{},"null"," tant que le document n'est pas enregistré",[262,313,314,319,324],{},[280,315,316],{},[58,317,318],{},"doc",[280,320,321],{},[58,322,323],{},"object",[280,325,326],{},"Copie JSON du document, tables enfants comprises",[262,328,329,334,339],{},[280,330,331],{},[58,332,333],{},"is_new",[280,335,336],{},[58,337,338],{},"boolean",[280,340,341,344],{},[58,342,343],{},"true"," si le document n'est pas encore enregistré",[262,346,347,352,356],{},[280,348,349],{},[58,350,351],{},"read_only",[280,353,354],{},[58,355,338],{},[280,357,358,360],{},[58,359,343],{}," si le champ n'est pas en écriture pour l'utilisateur",[42,362,364],{"id":363},"cycle-de-vie-de-lîle","Cycle de vie de l'île",[26,366,367,373,380,383,386],{},[29,368,369,370,102],{},"L'île est montée une seule fois à l'affichage du champ, via ",[58,371,372],{},"frappe.ui.mount_island(nom, conteneur, props)",[29,374,375,376,379],{},"Lorsque le document est modifié dans le formulaire, l'île reçoit les nouvelles propriétés par ",[58,377,378],{},"island.update(props)"," ; les modifications sont regroupées avec un délai de 300 ms.",[29,381,382],{},"Si les options du champ changent, l'île précédente est démontée et la nouvelle est montée.",[29,384,385],{},"Si le chargement de l'île échoue, un message est affiché à la place du composant et le nom de l'île n'est pas retenté pour ce champ.",[29,387,388,389,102],{},"Lorsque le champ est retiré du DOM, l'île est démontée par ",[58,390,391],{},"island.unmount()",[14,393,394],{},"Comme l'île ne reçoit qu'une copie du document, elle ne peut pas modifier le document : toute interaction doit passer par les mécanismes habituels du formulaire (script client, API) en complément de ce champ d'affichage.",[396,397,398],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":116,"searchDepth":123,"depth":130,"links":400},[401,402,405,406],{"id":44,"depth":130,"text":45},{"id":76,"depth":130,"text":77,"children":403},[404],{"id":229,"depth":158,"text":230},{"id":250,"depth":130,"text":251},{"id":363,"depth":130,"text":364},"Afficher une île Vue publiée par une application dans un formulaire de document, sans stocker de valeur","md",{"reviewed":410,"last_verified":411,"sources":412},true,"2026-11-04",[413,414,415,416],"dodock@develop:frappe\u002Fpublic\u002Fjs\u002Ffrappe\u002Fform\u002Fcontrols\u002Fvue_component.js","dodock@develop:frappe\u002Fcore\u002Fdoctype\u002Fdoctype\u002Fdoctype.py","dodock@develop:frappe\u002Futils\u002Fisland.py","dodock@develop:frappe\u002Fmodel\u002F__init__.py","\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fchamp-vue-component",{"title":5,"description":407},"2.next\u002F3.dodock\u002F10.developpeurs\u002Fchamp-vue-component","YXE8cJx4QCf7WLeKy8ovU9En4D4Og8eq4UQI7dH106E",{},1793871735779]