Jump to content

Someone tried to add vue and vuetify?

Recommended Posts

Perhaps will be useful. 

JS file

;( function($, _, undefined){
	"use strict";
	ips.controller.register('app.front.folder.vuemodal', {
		_vueapp: null,
		initialize: function () {
			var jsToGet = [
			ips.loader.get(jsToGet).then( function () { this.setup(); }.bind(this));
				"<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>
					  <div v-html="message"></div>
			this._vueapp = new Vue({
			  el: '#vuemodal',
		      vuetify: new Vuetify(),
		      template: `
                  <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>
                      <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>
                            <my-tooltip message="Help message"></my-tooltip>
                          <v-card-title class="pa-2">Useful Content</v-card-title>
                            <v-text-field class="ma-1" dense label="Enter your name"></v-text-field>
                            <v-card-actions class="pa-2 ma-0">
                              <v-btn small bottom color="success" @click="submit()">Submit</v-btn>
			    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> 

add to custom css (ips styles break vuetify styles)

.v-text-field input {


Link to comment
Share on other sites

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...