Utilizing Vue2 Libraries in the Admin

[aimeos]

Seems to be not as easy as expected.

You don't want to change any files in the aimeos/ai-admin-jqadm package because they will be replaced by new versions as soon as you run "composer update". Therefore, the first step should be to get Vuetify into your own extension. The easiest way seems to be to include the content of the Vuetify files from the CDN in your extension:
https://vuetifyjs.com/en/getting-starte ... #using-cdn

Download the files and add them as themes/admin/jqadm/vuetify.js and themes/admin/jqadm/vuetify.css. Then, add them to your manifest.jsb2 file in the appropriate sections before your custom.css/js files.

Afterwards, you have to register Vuetify as Vue component by overwriting the Aimeos.app function:
https://github.com/aimeos/ai-admin-jqad ... #L123-L139

Code: Select all

$(function() {
	const { createVuetify } = Vuetify
	const vuetify = createVuetify()
	const app = Aimeos.app

	Aimeos.app = function(config, props) {
		const vapp = app(config, props)
		vapp.use(vuetify)
		return vapp
	}
})

[jafo66]

I downloaded both the js file and the css file. I added them to the manifest.jsb2 file and see that they are being loaded.

In the console, I now get an error that "vue" is not defined from the vuetify.js include. This is BEFORE adding the recommended code to the custom.js file. (NOTE: I used to the non-minified version of Vuetify so I could see a valid error message). Also, I tried the beta version of vue-select, which specifically intended for Vue3, and it complained about the same error.

Code: Select all

Uncaught TypeError: vue is undefined
    ExpandTransitionGenerator http://localhost.proxyman.io:8000/admin/default/jqadm/file/package-js/en:3174
    <anonymous> http://localhost.proxyman.io:8000/admin/default/jqadm/file/package-js/en:3389
    <anonymous> http://localhost.proxyman.io:8000/admin/default/jqadm/file/package-js/en:10
    <anonymous> http://localhost.proxyman.io:8000/admin/default/jqadm/file/package-js/en:11

Any thoughts on how to handle this?