How to use jupyter-vue - 7 common examples

this.displayed.then(() => {
            if (!document.getElementById('vuetify-styles')) {
                this.createDivs(getContainer() || document.body);
            }

            const vueEl = document.createElement('div');
            this.el.appendChild(vueEl);

            this.vueApp = new Vue({
                vuetify,
                el: vueEl,
                provide: {
                    viewCtx: createViewContext(this),
                },
                render: (createElement) => {
                    // TODO: Don't use v-app in embedded mode
                    /* Prevent re-rendering of toplevel component. This happens on button-click in
                     * v-menu */
                    if (!this.ipyvuetifyApp) {
                        this.ipyvuetifyApp = createElement('div', { class: 'vuetify-styles' }, [
                            createElement('v-app', [vueRender(createElement, this.model, this)]),
                        ]);
                    }
                    return this.ipyvuetifyApp;
                },
            });
        });
    }

render: (createElement) => {
                    // TODO: Don't use v-app in embedded mode
                    /* Prevent re-rendering of toplevel component. This happens on button-click in
                     * v-menu */
                    if (!this.ipyvuetifyApp) {
                        this.ipyvuetifyApp = createElement('div', { class: 'vuetify-styles' }, [
                            createElement('v-app', [vueRender(createElement, this.model, this)]),
                        ]);
                    }
                    return this.ipyvuetifyApp;
                },
            });

vueRender(createElement) {
        return createElement({
            provide: {
                viewCtx: createViewContext(this),
            },
            render: () => {
                return vueRender(createElement, this.model, this)
            },
        });
    }
}

vueRender(createElement) {
        return createElement({
            provide: {
                viewCtx: createViewContext(this),
            },
            render: () => {
                return vueRender(createElement, this.model, this)
            },
        });
    }
}

render: () => {
                return vueRender(createElement, this.model, this)
            },
        });

return {
            ...super.defaults(),
            ...{
                _model_name: 'HtmlModel',
                _view_name: 'VuetifyView',
                _view_module: 'jupyter-vuetify',
                _model_module: 'jupyter-vuetify',
                _view_module_version: '0.1.11',
                _model_module_version: '0.1.11',
            },
        };
    }
}

HtmlModel.serializers = {
    ...VueHtmlModel.serializers,
};

return {
            ...super.defaults(),
            ...{
                _model_name: 'VuetifyTemplateModel',
                _view_name: 'VuetifyView',
                _view_module: 'jupyter-vuetify',
                _model_module: 'jupyter-vuetify',
                _view_module_version: '0.1.0',
                _model_module_version: '0.1.0',
            },
        };
    }
}

VuetifyTemplateModel.serializers = {
    ...VueTemplateModel.serializers,
};