Vue 3 migration

[diegoazh]

I would like to hear the users here and try to discuss the next steps for this plugin, I know that it needs more work, I was working on better documentation and a better structure more readable and simplest than before, I think I got it but only some parts it needs more work but I don't want to spend more time in the version 2, I checked all examples in the new documentation and all of them are working well and as expected but we never can be totally sure that any bug is there waiting to show up.

My idea is to start the migration to Vue 3 using the composition API and at the same time try to improve, fix or add features in version 2 of this plugin, another possibility is to start the migration and try to do it work on version 2 of Vue but I'm not totally sure that if it is possible, I guest that we can have backward compatibility but again I'm not totally sure about that.

What do you think about that, please let me your comments and all developers that would like to participate are welcome, the only requirement is to organize the work to avoid spending so much time again.

Regards.

[vesper8]

Hey @diegoazh,

I think the library is decently stable and feature-rich right now, it makes a lot of sense to release a Vue 3 version and release it as a 4.0 and keep maintaining 3.0 for a little while in case some serious bugs arise but otherwise focus on Vue 3.

I'm using this in a Vue 3 project right now using @vue/compat and it works but throws a ton of warnings in the console.. they are harmless and everything works.

A lot of the things are quite easy to change.. things like renaming beforeDestroy to beforeUnmount, replacing the usage of Vue.prototype and making async components use defineAsyncComponent(() => import('./Component.vue'))

I could be way wrong but I imagine that essentially getting this package to run on Vue 3 and just address all the @vue/compat warnings one at a time until you've solved them all, shouldn't take you so long.. probably you could get 90% of it done in a few hours and then there may be a few final things that need a bit more refactoring.

But it's not a monumental task.. I bet you could have it all done on a free Sunday or something ;-)

Anyway I look forward to you taking a real stab at it and will be happy to test our the next-branch.

[diegoazh]

@vesper8 thanks for your comment, I'll try to do it in the next weeks and I liked so much your suggestion about landing it as v4.0 and maintaining the v3.x and below for the Vue 2 version. I was thinking if is better to land in a different package or not, but I think you are right in your considerations.

[vesper8]

@diegoazh I need this so bad... found out that it's not actually possible to use gmap-vue with @vue/compat.

So now I'm trying to use https://github.com/inocan-group/vue3-google-map + https://github.com/eregnier/vue3-gmap-custom-marker but it's honestly so lacking in the feature department.. like it doesn't even support clusters.. and overall I just don't really like its implementation.. yours is way better.. so I hope you find the time very soon!

[diegoazh]

@vesper8 I'm trying to finish the work this weekend, but I'm having issues with types because I'm moving this plugin to a typescript version.

[dev02iggy]

Do you know if you have a migration forecast?

[diegoazh]

I hope to finish at the end of October or starting November, I can say that now because I could solve the main issues on the migrations, I was trying to improve its quality by adding UT and E2E layers to avoid common errors that happened in the past with the previous version of the plugin.

[diegoazh]

Hi people, for those waiting for this plugin to be migrated to Vue 3, I'm working on that, but coding alone makes it difficult to have faster progress.

Anyone who wants to collaborate and helps on this migration is welcome.

I'm working on the branch named issue-15-Vue_3, I added a new package called gmap-vue-next. The idea is to finish the work there and convert that package into the new plugin for Vue 3.
The migration is based on the composition API, using Vite, Typescript, Vitest for unit testing and Cypress for E2E tests.
Currently, I finished migrating and reorganising the MapLayer component, the main and big component in the application, also I finished moving many of the functions of the plugin into typescript functions with their types as composables and I also started writing the unit tests for some of them.

Issues:
I would like to add an e2e test layer to this plugin with Cypress but it turned into something more difficult than I estimated.
I tried to add a small Vue 3 app to run with Vite, inside the cypress/runner folder using the Vue 3 CDN and importing the built script of the plugin from the dist folder in order to write the e2e test but that was a pain in the ass because when I use Vite I need to use the ESM module built because the UMD module is ignored on the build and preview of Vite, using that I found an import problem because it tries to import google.maps before it is loaded on the page. I'm still trying to find the best approach to solve this, also I found problems with the CSS file because importing it on the page with a link tag doesn't work and the styles are not applied, as a workaround, I decided to use a Vite plugin to add the CSS in the build js file but this expects a style tag to use it and affects the SSR.

I'm completely open to suggestions and opinions, for those that want to help with this migration please take a look at the mentioned branch above, and feel free to open a discussion here.

Thank you all, and I apologize to be late on this migration.

[vesper8]

Enjoyed your work and good luck with the project. In my case, I needed something months ago so I moved on to https://github.com/inocan-group/vue3-google-map which wasn't very hard to migrate to and works for my needs. You might use that as inspiration.

Cheers!

[diegoazh]

Awesome! I'm happy to hear that you found a solution for you're needs.

[diegoazh]

Finally, I could add the e2e layer to the plugin and test the MapLayer component with Vite, Cypress, and ES6 Modules and load CSS from an external file to avoid affecting the SSR 💪🏼.

I hope to finish this migration as soon as I can.

[diegoazh]

Today I finished migrating all components to the Vue 3 version 💪🏼, all components use composition API with setup script. For those that would test it, you can use the branch for issue #15 following the same approach I used to run e2e tests with Cypress.

The new version will be landed coming soon 🎉.

My next steps are:

• finish with UT and E2E test
• write the new documentation, we have many braking changes and improvements there.

[diegoazh]

GMAP-VUE for Vue v3 landed!!!! 🎉

The new version of this plugin for Vue v3 was published 🎉 today in a new package @gmap-vue/v3.

$ npm i @gmap-vue/v3

This version has many breaking changes with respect to the version for Vue v2, which is currently undocumented. Please review the source code to understand how to use it until the new documentation is ready.

• Version 1.0.0 works well but it doesn't include the single-file components on the package to can load them on demand, which means you need to load all components
• In the following version the single-files components will be added to the final package to can load them on demand.
• It uses Vite to build the plugin
• It has full typescript support
• It also includes some unit tests with Vitest
• It includes e2e tests with Cypress
• It is undocumented yet

The version of this package for Vue v2 is officially unmaintained since now. I prefer to dedicate all my efforts to this new version and encourage all users to migrate to the new Vue v3.