Utilizing Vue2 Libraries in the Admin

Help for integrating the Laravel package
Forum rules
Always add your Laravel, Aimeos and PHP version as well as your environment (Linux/Mac/Win)
Spam and unrelated posts will be removed immediately!
User avatar
aimeos
Administrator
Posts: 8004
Joined: 01 Jan 1970, 00:00

Re: Utilizing Vue2 Libraries in the Admin

Post by aimeos » 30 May 2024, 12:43

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
	}
})
Professional support and custom implementation are available at Aimeos.com
If you like Aimeos, Image give us a star

jafo66
Posts: 38
Joined: 06 Mar 2024, 04:42

Re: Utilizing Vue2 Libraries in the Admin

Post by jafo66 » 31 May 2024, 23:09

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?

Post Reply