[Done] Native Vue 3 support

[satyavh]

Vue is as popular as React, yet Meteor relies on third-party packages to enable Vue (https://github.com/meteor-vue/vue-meteor). The problem is, those packages are for Vue 2 and 3 is now released. The other problem is they are created by a single guy, and are not maintained anymore, having bugs and issues, such as conflicting with Meteor's HMR.

I know that Meteor has from origin a strong relationship with people of the core Vue team, so I can imagine it would be 'rather easy' to work together on a well supported Vue integration, similar to the core React integration. A well supported integration could make Meteor the app layer for Vue

[hluz]

Making Vue a first class Meteor citizen would be like an adrenaline shot in Meteor's arm. First class means keeping the integration packages up to date with both Meteor and Vue.

How about having a special sponsoring agreement with Akryum ? Could it help?

[diavrank]

I have become a new sponsor to support Meteor + Vue 3 :) . I hope to see in the future new updates including Vue 2 syntax.

[harry-73]

including Vue 2 syntax.

Having the support of the current Vue 2 + Meteor syntax is key to allow smooth migration.

[filipenevola]

This work in moving forward, more about it here

[filipenevola]

Hi all, the first version is already published.

See details here.

• Package
• Repository
• Docs

It would be nice to update our tutorial.

Any volunteers? The repository is here and I'm available to answer any questions about the tutorial and how to update it.

[satyavh]

How native is this solution now? It's not developed by Tiny but dependent on a single external developer.

For example, I just found out that new HMR in Meteor 2.5 breaks HMR of the Vue 2.0 integration. To put that in perspective, I see that in Meteor 2.5 react-fast-refresh package got updated by Tiny, but nothing similar happened for Vue. From which I must conclude that React is natively supported, Vue is still a 2nd class citizen (correct me if I'm wrong).

In the Vue3 package repository in the HMR.js file I see this:

// @TODO Meteor doesn't support specific HMR requests

// function genTemplateHotReloadCode (id, request) {
//   return `
//   module.hot.accept(${request}, () => {
//     api.rerender('${id}', render)
//   })
// `
// }

Such comments make me really wonder how the new Vue 3 integration will be supported by Tiny and is guaranteed to work when Meteor gets updated?

Overall, I don't feel the current solution is what the community asks for. I think what the community asks for is for Vue to become a 1st class citizen, similar like React: natively supported, by Tiny, guaranteed to work and be updated when Meteor updates.

[filipenevola]

Hi, we have partnerships with community members, in some cases with sponsorship as well.

If there are people here interested in partner with us to improve the support for Vue feel free to reach me out at filipe@meteor.com.

In the core team we are always trying to provide support for everything as well, but of course we have limited resources.

I don't think @zodern changes on HMR were expected to break Vue 2 integration, maybe we can have a simple fix to make it work again.

[zodern]

Does removing the hot-module-replacement package from your app fix using Vue 2? The Vue 2 integration has its own HMR implementation. I am a little surprised it worked in the past when used at the same time as Meteor's HMR since they will conflict with some types of file changes. If someone creates a reproduction I could see if there is a way to get it working as it was with Meteor 2.4, but disabling Meteor's HMR (by removing the hot-module-replacement package) when using Vue 2 would be the more reliable solution. The vue 3 integration uses Meteor's HMR so it doesn't have the same problem.

[red-meadow]

Vue 2 integration has had problems with HMR for a very long time. Its functioning was somehow dependent on the syntax used inside the updated component; maybe CSS Modules broke it, maybe something else - I have never figured out. There were other problems with Vue 2 integration too, and the main one was the fact that it was abandoned by its creator 3-4 years ago.
Maybe my own experience might be indicative here: first I created issues, 1-2 years later I created PRs but they were never reviewed (as well as the others), then I wrote a plugin to Vuex to encapsulate all Meteor related stuff, so I could develop pure Vue frontend independently, without all those issues and with perfectly working HMR, and eventually Svelte integration came, I adopted it and never looked back.
I'm very happy that akryum created Vue 3 integration (I didn't expect that at all) but I'm afraid it can repeat the fate of the predecessor. Summarizing, I totally agree with @satyavh that Vue - considering its popularity - must become a 1st class Meteor citizen, supported by Tiny.

[satyavh]

Yes that's how it goes with the many Meteor projects I've been doing - and similar practices I know from other developers. First everyone always moves the frontend out of Meteor because build is slow and Vue HMR is broken. Then soon it becomes a slippery slope, that often ends with dropping Meteor completely as it's hard to work with professionally. Not only with Vue.

I'm still investigating why 2.5 breaks HMR. It's hard to pinpoint out, exactly like you say "maybe CSS Modules broke it, maybe something else - I have never figured out ". Neither have we yet...

[satyavh]

Does removing the hot-module-replacement package from your app fix using Vue 2?
No it does not.

I did some further investigation. When starting from scratch with a new Meteor 2.5 + Vue2 project HMR seems to work fine. However, once components become more complex, add vue router, layouts, Vue plugins, etc, it becomes unreliable and stops to work. Hard to figure out what's actually causing it, so I accept this has just become a dead end...

[satyavh]

More limitations:

Both pug, sass, scss, etc don't work with the new Meteor Vue3 integration. It only works with plain HTML and css, it has no support for other pre/post processors or loaders, and it doesn't support @import for css files.

Issues here
meteor-vue/meteor-vue3#4
meteor-vue/meteor-vue3#5

[satyavh]

We have published 2 packages to support this
https://atmospherejs.com/?q=seamink

See readme for more details

[mullojo]

I'm just adding a Github link to @satyavh Vue 3 packages here: https://github.com/Altruistiq/meteor-vue3

These packages might give us an approach to consider in how to support updates to the .vue file compiler.

[mullojo]

The above issues are being solved via a new package 📦 meteor-vite here:
https://packosphere.com/vite/bundler
Leverages Vite to bundle client side code and solves all pug, sass, scss, etc issues, also handles HMR

And the now updated vue-meteor-tracker package 📦 supports Vue 3
https://github.com/meteor-vue/vue-meteor-tracker
Vue 2 and Vue 3 support with the Options API and the new Composition API