Utilizing Vue2 Libraries in the Admin

[jafo66]

I'm wondering if there is a proper way to overload / enhance the admin.js file. I'm looking to include Vuetify (version meant for Vue2) and the only way I could find to properly getting working is to add this to the admin.js file:

Code: Select all

vue(node) {
return new Vue({
	el: node,
	vuetify: new Vuetify(),

Is there a more upgrade friendly way of doing this AND is it possible to do this only in the pages I need Vuetify? I'm thinking about some sort of JS magic that gets the node and then gets the attached vue instance to add Vuetify to it.

Thanks for the help.

[aimeos]

In Aimeos 2024.x it's fairly simply because you can overwrite the Aimeos.app() method in your own JS file:
https://github.com/aimeos/ai-admin-jqad ... #L123-L139

Something like this should do the job:

Code: Select all

// in libs.js to create a new JS bundle using NPM
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

// in your own JS file
const appOriginal = Aimeos.app;
Aimeos.app = function(config = {}, props = {}) {
	const app = appOriginal(config, props);
	app.use(createVuetify({
		components,
		directives,
	});
	return app;

In Aimeos 2023.10 with Vue 2.x, you have to overwrite the whole method in your own JS file:
https://github.com/aimeos/ai-admin-jqad ... #L315-L358

[jafo66]

Does that mean that the latest 2024 release is now on Vue3?

[aimeos]

Yes

[jafo66]

I've completed an upgrade and installed Vuetify via NPM. My questions from your post below:

• Where do I implement / override the lib.js?

• Do I need to add "your own JS file" to the manifest as before?

Thanks!

[jafo66]

After doing some investigation, it looks like the “vue” class isn’t creating an instance of Vue, which means my existing Vue components are not rendered. Any thoughts on why that might be happening?

[aimeos]

You need to include Vuetify and run esbuild to create a JS package file which you can then include in the manifest.jsb2 of your package. See: https://github.com/aimeos/ai-admin-jqad ... ge.json#L8

[jafo66]

I think i missed the howto on how to do the upgrade on the admin side from 2023 to 2024 (vue2 to vue3).

What I'm seeing inside the new code in v2024.04 is instead of having a div tag with the class of "vue", components now need to be called as "is='component-name'. Also in the components defined in .js files, it looks like you switched from Vue.component('component_name')... to Aimeos.component['component_name'] =.

My questions:

• Is what I'm doing correct? If so, what else needs to be done to convert 2023 components that were working just fine, to this new coding conventions inside the admin?
• I had been using JQuery and it looks like that has been disabled, do I update that in the index.blade.php in /resources/views/vendor/.../index.blade.php?
• I have been able to compile using esbuild (per your instructions) to overwrite of the Aimeos app, but now it crashes with some strange "u" is not defined. Is there not a cleaner way of including other Vue components? Ignoring vuetify for a second, I had been using vue-select, but now a component I built with v-select in it, doesn't work.

NOTE: I have updated the manifest.jsb2 file and it does seem to be working properly. I did modify it so that all of my components are loaded as part of index-js section instead of separate sections as I had previously been doing.

[aimeos]

What I'm seeing inside the new code in v2024.04 is instead of having a div tag with the class of "vue", components now need to be called as "is='component-name'. Also in the components defined in .js files, it looks like you switched from Vue.component('component_name')... to Aimeos.component['component_name'] =.

No, these are not the changes you have to do and you are mixing up things.

[*]Is what I'm doing correct? If so, what else needs to be done to convert 2023 components that were working just fine, to this new coding conventions inside the admin?

Please check the JQAdm section of the changelog for relevant changes you need to do if you upgrade from 2023.10 to 2024.x:
https://aimeos.org/docs/latest/changelog/2024.x/

[*]I had been using JQuery and it looks like that has been disabled, do I update that in the index.blade.php in /resources/views/vendor/.../index.blade.php?

jQuery is now part of the bundle created by NPM:
- https://github.com/aimeos/ai-admin-jqad ... e.json#L32
- https://github.com/aimeos/ai-admin-jqad ... s.js#L1-L2
- https://github.com/aimeos/ai-admin-jqad ... js#L22-L23

[*]I have been able to compile using esbuild (per your instructions) to overwrite of the Aimeos app, but now it crashes with some strange "u" is not defined. Is there not a cleaner way of including other Vue components? Ignoring vuetify for a second, I had been using vue-select, but now a component I built with v-select in it, doesn't work.

v-select has been replaced by Multiselect because there's no working version of v-select for Vue 3.x

NOTE: I have updated the manifest.jsb2 file and it does seem to be working properly. I did modify it so that all of my components are loaded as part of index-js section instead of separate sections as I had previously been doing.

That's correct.

[jafo66]

On the 2024.04 version inside the ./vendor/aimeos/ai-admin-jqadm/ directory with no changes to any of the files, I ran the following:
- npm install
- npm run build

Once I do that it generates a new index.js and index.css.

I get this error in the browser:
Uncaught ReferenceError: assignment to undeclared variable Aimeos
<anonymous> http://localhost:8000/admin/default/jqadm/file/index-js/en:3770

and while the Dashboard draws, the menu doesn't work properly. I can easily reset and it works when I put the original two files back.

Following your previous post, I assumed I could easily "regenerate the file" and then start adding in the components (ex: vuetify) as expected. thoughts on steps I'm doing wrong?