Support for Vue 3

[Kocal]

Hi!

Vue 3 has been released yesterday and I would like to know if its support was planned, or if I can help on it.

Thanks!

[paulshen]

I haven't tested it fully but passing the app instance instead of the global Vue seems to work for the most part.

import { createApp } from 'vue';
import { Vue as VueIntegration } from '@sentry/integrations';

const app = createApp(App);
Sentry.init({
  ...
  // instead of passing Vue default export
  integrations: [new VueIntegration({ Vue: app })],
});

[Kocal]

Oh, that's right, I didn't think about doing this.

But, if we initialize Sentry after creating our Vue app, it means that Sentry won't be able to capture errors that happens in createApp() and App component (e.g.: in hook created), which is a big change, right?

[paulshen]

@Kocal I'm new to Vue but my guess is most of that happens when you call app.mount, which you can call after Sentry.init

[Kocal]

Yes that's true, however it's less "immediate" than before... but I guess we can't do much.

I've identified some breaking changes when using Vue 3:

• https://github.com/getsentry/sentry-javascript/blob/master/packages/integrations/src/vue.ts#L159: it won't be possible to use global Vue since Vue.mixin (https://github.com/getsentry/sentry-javascript/blob/master/packages/integrations/src/vue.ts#L375) does not exists anymore. User need to explicitly pass their Vue app instance
• https://github.com/getsentry/sentry-javascript/blob/master/packages/integrations/src/vue.ts#L255 & https://github.com/getsentry/sentry-javascript/blob/master/packages/integrations/src/vue.ts#L307, vm.$once has been removed (Remove instance event API methods vuejs/rfcs#118)

[9mm]

Also interested in this for my new vue 3 app with sentry

[dnlsndr]

This is actually a blocking requirement for us, we are really interested in resolving this. Maybe I can somehow help

[kamilogorek]

@onmyflow I'm currently scheduled to write a standalone @sentry/vue package, and would love to have a prepared list of things to take care of before I start writing it. I'm not up to date with Vue3 just yet, and other than @Kocal comment (thanks!) I'll have to read through to find the breaking changes.

[eino]

I tried @paulshen 's way ; it looks so close yet so far, as I get the following error:

Type 'ComponentPublicInstance(..) is missing the following properties from type 'VueInstance': config, mixin. Seems indeed those are attributes that have been displaced in Vue3

[godardt]

Same issue here, would be great to have sentry support for Vue 3

[dnlsndr]

Any news on this?

[stripathix]

This is a blocking issue for Vue 3 upgrade for my application :-(. Any update on this?

[Kocal]

One issue is #2953 which splits the Vue integration in another package @sentry/vue.
Should we wait this package to be released, or we can start to migrate the current Vue integration to Vue 3?

Also, should we keep Vue 2 support?

[scott-leung]

One issue is #2953 which splits the Vue integration in another package @sentry/vue.
Should we wait this package to be released, or we can start to migrate the current Vue integration to Vue 3?

Also, should we keep Vue 2 support?

I think we should keep Vue 2 support, because most of Vue Developers are still using Vue2.
But support for Vue 3 will be increasingly needed in the feture.

[Kocal]

Also, how we will handle event for lifcycle hooks (vm.$once('hook:...')) and the new lifecycle events from the Composition API (https://vue-composition-api-rfc.netlify.app/api.html#lifecycle-hooks)?

[scott-leung]

I think it's right that splits the Vue integration in another package @sentry/vue.
And I'm going to work on it together and speed it up.