feat(vue): Expose VueIntegration to initialize vue app later

[mydea]

This exposes a new VueIntegration from @sentry/vue which can be used to initialize vue error tracking for a late-defined vue app.

With this, you can initialize the SDK early, even if vue is not setup yet:

import * as Sentry from '@sentry/vue';

Sentry.init({
  dsn: '...',
  // Filter out default `Vue` integration
  integrations: (integration) => integration.id !== 'Vue',
});

// Sometimes later
const app = createApp({
  template: '<div>hello</div>',
});

Sentry.addIntegration(new Sentry.VueIntegration({ app }));

[AbhiPrasad]

We'll need to add docs for this too!

[AbhiPrasad]

I wonder if we should pass in client as an optional arg.

[mydea]

sure, why not! will adjust it

[mydea]

I added an optional client argument to be passed.

[Lms24]

This might come in very handy for the Astro SDK! looks good to me but I had a suggestion around the API. As I said, we can probably expand it further with another optional param.

[Lms24]

I'm just wondering (we can add this later if we actually need it) but wdyt about optionally passing in the Vue-specific options that are used by vueInit? I'm thinking about a case where users would initialize the Browser SDK (or that would be done for them e.g. in the Astro SDK) and they'd additionally pass in the Vue options here.

[mydea]

Hmm maybe actually instead of passing the client optionally, we should pass the options directly? 🤔 as we don't really need the client in there, we just pick the options off...?

[mydea]

After talking about this with Lukas, I rewrote this to actually expose this as an integration. This is more in line with how we do this in other places. With this, you can lazy initialize this like this:

Sentry.init({
  integrations: (integration) => integration.id !== 'Vue',
});

// Later
Sentry.getCurrentHub().getClient()?.addIntegration(new Sentry.VueIntegration({ app }));

Plus we also talked about the need to have a proper top level method to add an integration, (which we can do in a separate PR), it should just be:

Sentry.addIntegration(...);

in an ideal world.

This also makes it easier to actually use @sentry/vue and @sentry/browser together, in case this is necessary, as you can really also add the vue integration to a regular browser client etc.