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!
jafo66
Posts: 65
Joined: 06 Mar 2024, 04:42

Utilizing Vue2 Libraries in the Admin

Post by jafo66 » 14 May 2024, 21:20

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.

User avatar
aimeos
Administrator
Posts: 8244
Joined: 01 Jan 1970, 00:00

Re: Utilizing Vue2 Libraries in the Admin

Post by aimeos » 15 May 2024, 06:47

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

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

Re: Utilizing Vue2 Libraries in the Admin

Post by jafo66 » 16 May 2024, 02:23

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

User avatar
aimeos
Administrator
Posts: 8244
Joined: 01 Jan 1970, 00:00

Re: Utilizing Vue2 Libraries in the Admin

Post by aimeos » 16 May 2024, 06:20

Yes
Professional support and custom implementation are available at Aimeos.com
If you like Aimeos, Image give us a star

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

Re: Utilizing Vue2 Libraries in the Admin

Post by jafo66 » 18 May 2024, 15:45

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
Posts: 65
Joined: 06 Mar 2024, 04:42

Re: Utilizing Vue2 Libraries in the Admin

Post by jafo66 » 19 May 2024, 18:38

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?

User avatar
aimeos
Administrator
Posts: 8244
Joined: 01 Jan 1970, 00:00

Re: Utilizing Vue2 Libraries in the Admin

Post by aimeos » 22 May 2024, 12:35

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

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

Re: Utilizing Vue2 Libraries in the Admin

Post by jafo66 » 28 May 2024, 21:59

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.

User avatar
aimeos
Administrator
Posts: 8244
Joined: 01 Jan 1970, 00:00

Re: Utilizing Vue2 Libraries in the Admin

Post by aimeos » 29 May 2024, 07:11

jafo66 wrote: 28 May 2024, 21:59 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.
jafo66 wrote: 28 May 2024, 21:59 [*]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/
jafo66 wrote: 28 May 2024, 21:59 [*]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
jafo66 wrote: 28 May 2024, 21:59 [*]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
jafo66 wrote: 28 May 2024, 21:59 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.
Professional support and custom implementation are available at Aimeos.com
If you like Aimeos, Image give us a star

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

Re: Utilizing Vue2 Libraries in the Admin

Post by jafo66 » 29 May 2024, 14:38

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?
Last edited by jafo66 on 30 May 2024, 14:39, edited 1 time in total.

Post Reply