Can i use vue component in html field?

i want to create a component in HTML field like roles in user … the component is already exist in vue …
can i use it in doctype ?>>
how ?
if there is example please share ?

Out of the box, no.

Theoretically, it should be possible. To use a Vue component, you need a Vue instance running on the page you want to use a Vue component for. You can modify your page script to create a Vue instance on that page and bind it to a node in the document tree for that page.

Sorry, I can’t give you a concrete Vue example, since I only used an HTML filed to implement a homebrewn vanilla JS hack for a Form page.

Hey try this in V13

  1. In the public/js directory of your app create two files Main.vue and a js file example map.bundle.js (note name must end with .bundle.js)

in Main.vue you can have your root component example

            Hi friend
    export default {

in the public/js /map.bundle.js:

import Main from "./Main.vue";
frappe.provide(""); // create a namespace within the Frappe instance = class {
    constructor({ parent }) {
        this.$parent = $(parent);

make_body() {
    this.$page_container = $('<div class="hub-page-container">').appendTo(

      new Vue({
        el: ".hub-page-container",
        render: (h) => h(Main),
  1. Add maps.bundle.js to
    app_include_js = [“map.bundle.js”]

  2. Execute “bench build” command

  3. Execute “bench restart” command

  4. Create a client script of the doctype which has the html field, in this instance my doctype is called ‘Property group’ and the html field is called 'grps ’

frappe.ui.form.on(‘Property Group’, {
refresh(frm) {
.html ("<div class='hub-page-container'> </div>");

var wrapper = frm.fields_dict['gprs'].wrapper;
   var page = {parent:wrapper}
	} })

Good luck.


This is great!