Can i use vue component in html field?

1

hi
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 ?

2

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.

3

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

<template>
        <div>
            Hi friend
        </div>
    </template>
    <script>
    export default {
        
    }
    </script>

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

import Main from "./Main.vue";
frappe.provide("frappe.map"); // create a namespace within the Frappe instance

frappe.map.Chart = class {
    constructor({ parent }) {
        this.$parent = $(parent);
        this.make_body();
    }

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

      new Vue({
        el: ".hub-page-container",
        render: (h) => h(Main),
    });
}};

  1. Add maps.bundle.js to hooks.py
    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) {
$(frm.fields_dict[‘gprs’].wrapper)
.html ("<div class='hub-page-container'> </div>");

var wrapper = frm.fields_dict['gprs'].wrapper;
 
   var page = {parent:wrapper}
	new frappe.map.Chart(page);
	} })

Good luck.

7 Likes
4

This is great!