Jump to content

Community

Someone tried to add vue and vuetify?


desti
 Share

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 = [
				'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;
}

vue_ips.jpg.c57e4b0d199c609b2801ac7fa4479f6f.jpg

Link to comment
Share on other sites

 Share

×
×
  • Create New...

Important Information

We use technologies, such as cookies, to customise content and advertising, to provide social media features and to analyse traffic to the site. We also share information about your use of our site with our trusted social media, advertising and analytics partners. See more about cookies and our Privacy Policy