Team up to create the new Vue 3 integration

[filipenevola]

I’m not a Vue expert but would it be possible to return an array instead of an object with a result property? More like the React Hook useState so you don’t need to rename result all the time.

So instead of:

const { result: links } = autorun(() => Links.find()))

You would have:

const [ links ] = autorun(() => Links.find()))

I’m also not sure how many properties autorun is returning, I would prefer the object if it has more than 2 properties otherwise it would be hard to read the code destructing multiple properties in the array.

[akryum]

I added another method that calls autorun but returns only the result if you don’t need to manually control it (for example stop).

[filipenevola]

Sounds good.

Newbie question: is it not common in Vue usage to check for the ready() state?

[mullojo]

Hey @filipenevola in the Vue2 integration, we had the option to check the ready() state using $subReady on any subscription created. This worked really nice

If a subscription was named links for example, we would could use this.$subReady.links anywhere in Vue to do the next action.

The Vue2 tracker integration docs are here for quick reference:

GitHub - meteor-vue/vue-meteor-tracker: Use Meteor Tracker reactivity inside...

Maybe this feature or similar will be added to the Vue3 integration too.

Looks like we can watch the Vue3 integration progress over here:

meteor-vue3/packages/vue3 at main · meteor-vue/meteor-vue3

And it would be great if the Vue3 integration could be somewhat backwards compatible with Vue2 integration Like many of use using Vue2, at some point in the future, we’ll probably be trying to make as smooth of an upgrade as possible.

[diavrank95]

@mullojo

And it would be great if the Vue3 integration could be somewhat backwards compatible with Vue2 integration Like many of use using Vue2, at some point in the future, we’ll probably be trying to make as smooth of an upgrade as possible.

Strongly agree as I have recently posted a course on Udemy about Meteor and Vue where it currently has over 8000 students and I have been asked multiple times if they could upgrade their project to Vue 3 so it would be great if they just had to make a few small changes to achieve it.

[akryum]

The first basic version of vuejs:vue3 has been published on atmosphere | Repo | Docs

[diavrank95]

Already tested and it works fine

Counter 1

<template>
  <h2>Vue 3 using export default with Composition API</h2>
  <button @click="increment()">Click Me</button>
  <p>You've pressed the button {{counter}} times.</p>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    const counter = ref(0)

    function increment () {
      counter.value++
      console.log('incremented!')
    }

    return {
      counter,
      increment
    }
  }
}
</script>

<style scoped>
button {
  background: rgb(28, 124, 76);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
}
</style>

Counter 2

<template>
  <h2>Vue 3 using export default as Vue 2</h2>
  <button @click="increment()">Click Me</button>
  <p>You've pressed the button {{ counter }} times.</p>
</template>

<script>

export default {
  name: 'Counter as v2',
  data() {
    return {
      counter: 0
    };
  },
  methods: {
    increment() {
      this.counter++;
      console.log('incremented!');
    }
  }
};
</script>

<style scoped>
button {
  background: rgb(28, 124, 76);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
}
</style>

Counter 3

<template>
  <h2>Learn Meteor with Vue 3 with new component syntax!</h2>
  <button @click="increment()">Click Me</button>
  <p>You've pressed the button {{counter}} times.</p>
</template>

<script setup>
import { ref } from 'vue'

const counter = ref(0)

function increment () {
  counter.value++
  console.log('incremented!')
}
</script>

<style scoped>
button {
  background: #224e64;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
}
</style>

I guess Meteor.call and subscriptions only work with new component syntax so far.

[mullojo]

Great job @akryum !! And thanks for running some tests @diavrank95 !

[theara]

How about Meteor + Vue 3 SUPPORT TypeScript?

[satya]

We have published a fork of the Meteor Vue3 integration to support custom compilers, as well as a package to compile scss (stylus coming soon). This will enable people to write a Typescript compiler.

See packages here:
https://atmospherejs.com/?q=seamink

[nxcong]

Hi, do you have any github example of meteor-vue3 ?

[vblagomir]

@diavrank95 Don’t you have the problem in Composition API with:

[Vue warn]: Failed to resolve component: ****
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
"
"
" at <App>"

Options API works, but Composition not…

[vblagomir]

Ok, it can be resolved with the PR from nathan-muir:

Fix usage of components imported from other files

@akryum would you be so kind to review and implement the PRs to your vuejs:vue3 package? It desperately needs to be v0.0.2

The Vite + Meteor, although might sound a good idea for some complex situations (and I do use Vite for some other projects, but not in Meteor), but for simpler things normal Meteor builder works great. The biggest problem with Vite + Meteor btw, is that you can not use the same client entry point for Meteor and Vite, which is a no-go if you want to have modular architecture (keep your structure matching abstract logic, like having both client/ and server/ folders inside of nested structure within import/).

[vblagomir]

Ok, I have just emerged from working on a multi-year complex Meteor Vue project (on Vue2) and with the deprecation of Vue2 it was time to actually upgrade to Vue3 (which I delayed as much as possible, but apparently since even Meteor 2.12 did not support it, it was indeed the time).

Anyway, I analysed all existing options with Meteor + Vue3 and frankly speaking, there are not many. From one hand, there is a greatly started package vuejs:vue3, which got neglected recently to the point that it is not working correctly now. And from the other hand, there is an officially recommended meteor-vite package which, honestly, looked like a Frankenstein with bloatware. I love Vite, but it does not look organic within Meteor. Meteor builder has great advantage of structuring your code to abstract components containing both client and server blocks/modules, which allows to naturally grow the project right away, and later, when/if needed, decompose it to (micro)services with least effort. Actually, Meteor is probably the single option on the market that can do this, so this might be one of important USPs of Meteor as a product.

Good news that it was possible to resurrect the vuejs:vue3 as well as make it work with the akryum:vue-less (and I believe by that example you’d be able to add other preprocessors). So I have made a fresh boilerplate of a working Meteor@2.14 + Vue3 + LessCSS repo. Feel free to use. At this moment it contains modified vuejs:vue3 and akryum:vue-less packages, which eventually can be stripped away once original packages catch up with the changes.

GitHub - vbgm/meteor-vue3-less

I also hope that @akryum eventually updates his packages and we could call it the true native support of Vue3 in Meteor. And it would be really great if Meteor team would use this or something similar as an official option. I am ready to contribute for documentation or code whatever, let me know. Important is that we make a coordinated action. I do not want to spend hours/days preparing a PR for it to wait for 2 years to be approved.

[vooteles]

@vblagomir Have you checked out this package: GitHub - JorgenVatle/meteor-vite: ⚡ Replace Meteor's bundler with Vite for blazing fast build-times

Have not used it myself yet, but it does seem to be rather actively maintained and an interesting option. Perhaps it already addresses some of the issues you have had with meteor-vite.

[vblagomir]

But do be careful with this - any code that’s imported by both your Vite config’s clientEntry and your Meteor mainModule.client may lead to the code being included twice in your final production bundle.

I do not see any difference from the original meteor-vite, if so, then this is still Frankenstein with bells and whistles. Unless you really need to use some special preprocessors. Even TS is overrated, IMHO, but ok… the JS crowd over the last 10 years behaves in the same way, running from one hype to another…

[harry73]

Hi,

I am not able to say what is the best option but from a basic developer perspective, Vue3 suppor in Meteor seems to be lost in the space. I can see traction for react bur for Vue3…
Everyone that have vue2 apps will need to migrate to vue3. So, we must have clear path to do it and avoid splitting the effort into two different ways.

[vblagomir]

It would take for @akryum couple of hours to clean up and update existing code (the PRs are great there, working). Everything is 99% done already and after all, we are talking about a project for less than 500 lines of code altogether, very nicely structured by the way - so it is VERY maintainable and clean. And meteor-vite also works fine, so it is not a problem at all. What is needed is to update the packages and to update the official documentation with suggestions of using 2 options.

[harry73]

@vblagomir

to update the official documentation with suggestions of using 2 options.

For beginners, with hints on how to choose between the 2 options

[diavrank95]

Hi, not sure why you are getting such error but you can based on my repository which is using Vue 3 with some Composition API features.

GitHub - diavrank/theory-swe: Application which includes theoretical concepts...