Screen + Modern Javascript Frameworks (Example Vue.js)

First we need to implement a screen custom field renderer.

In that file we need to import our custom entry point.

Example: meceap.getCustomRootUrl("/resources/dist/datepicker.js")

class @CustomDatePickerFieldRenderer extends BaseFieldRenderer

    paintToDOM: ->
        $app = $ "<div />", id: "date-picker", "data-value": @getValue()
        $app.appendTo @node

        @node.on "selected", (e) =>
            @setValue e.originalEvent.detail?.getTime() or null

        @addScript('datepicker', meceap.getCustomRootUrl("/resources/dist/datepicker.js"))

After that, we need to create the webpack's entry point.

import Vue from 'vue'
import DatePicker from './components/DatePicker'

new Vue({
    el: '#date-picker',
    data: {
        value: null
    },
    beforeMount() {
        let value = this.$el.attributes['data-value'].value;
        if (value) {
            this.value = new Date(parseInt(value))
        }
    },
    render(h) {
        return h(DatePicker, {
            props: {
                value: this.value
            }
        })
    }
});

Date Picker Example (Vue Component)

<template>
    <datepicker @selected="onChange" :value="value"/>
</template>

<script>
    import Datepicker from 'vuejs-datepicker'
    export default {
        props: {
            value: Date
        },
        methods: {
          onChange(value) {
              this.$el.dispatchEvent(new CustomEvent("selected", {
                  detail: value,
                  bubbles: true
              }));
          }
        },
        components: {
            Datepicker
        }
    }
</script>