Someone tried to add vue and vuetify?

[desti]

Create simple modal window with form, for example?

[desti]

Perhaps will be useful. 

JS file

;( function($, _, undefined){
	"use strict";
	ips.controller.register('app.front.folder.vuemodal', {
		_vueapp: null,
		initialize: function () {
			var jsToGet = [
				'https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js',
				'https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.js',
			];
			ips.loader.get(jsToGet).then( function () { this.setup(); }.bind(this));
			$('head').append( 
				"<link rel='stylesheet' type='text/css' media='all' href='https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css' />",
				"<link rel='stylesheet' type='text/css' media='all' href='https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css'/>" 
			);
		},

		setup: function() {
			Vue.component('my-tooltip', {
			 	  props: ['message'],
				  template: `
					<v-tooltip left :open-on-hover="false">
					  <template #activator="{ on }">
					    <v-btn icon @click="on.click" @blur="on.blur" retain-focus-on-click>
					       <v-icon color="grey lighten-1"> mdi-help-circle-outline </v-icon>
					    </v-btn>
					  </template>
					  <div v-html="message"></div>
					</v-tooltip>
				  `
			});
		
			this._vueapp = new Vue({
			  el: '#vuemodal',
		      vuetify: new Vuetify(),
		      template: `
				<v-app>
                  <v-row justify="center">
                    <v-dialog v-model="showModal" max-width="600">
                      <template v-slot:activator="{ on, attrs }">
	    	            <v-btn color="primary" dark v-bind="attrs" v-on="on">Open Dialog</v-btn>
                      </template>
                      <v-card class="pa-4 indigo lighten-5">
                        <v-card class="pa-2">
                          <v-toolbar dense color="blue darken-4" dark>
                            <v-toolbar-title class="headline">Popup header</v-toolbar-title>
                            <v-spacer></v-spacer>
                            <my-tooltip message="Help message"></my-tooltip>
                          </v-toolbar>
                          <v-card-title class="pa-2">Useful Content</v-card-title>
                          <v-form>
                            <v-text-field class="ma-1" dense label="Enter your name"></v-text-field>
                            <v-divider></v-divider>
                            <v-card-actions class="pa-2 ma-0">
                              <v-spacer></v-spacer>
                              <v-btn small bottom color="success" @click="submit()">Submit</v-btn>
                            </v-card-actions>
                          </v-form>
                        </v-card>
                      </v-card>
  	      	        </v-dialog>
                  </v-row>
	    	    </v-app>
				`,
			    data: { showModal: false },
			    methods: { submit() { this.showModal = false} }
			});
		}
	});
}(jQuery, _));

add to template

<div data-controller="app.front.folder.vuemodal" style='height:36px !important; overflow: hidden !important;'>
  <div id='vuemodal'></div> 
</div>

add to custom css (ips styles break vuetify styles)

.v-text-field input {
  border:none!important;
  box-shadow:none!important;
  max-width:100%!important;
}

[Numbered]

It might be useful in case of inserting some standalone vue widget inside IPS from another modern web service. Thank you for the starting point. But in the case of standard behavior (like a modal form), it's not good practice, as I think.

[desti]

Yes, the real script shows the complex vue widget (fetch data from server, dynamic form render, send data back to server). Scanty "ips form helper" cannot do this without dark rituals and human sacrifice.