Use Vue3 inject inside a Typescript class

Question

I'm creati an error reporting service, and trying to provide it for the entire app.

import ErrorReporter from "@/services/error_reporter/error-reporter.service";

const app = createApp(App);

app.provide('errorReporter', new ErrorReporter());

and the importing it in a Ts class like so

import {inject} from "vue";

export default class OAuthFedIdService {

    errorReporter: ErrorReporter = inject("errorReporter") as ErrorReporter;

but i get this warning inside the console

inject() can only be used inside setup() or functional components.

is there a way to use the provide/inject functionality of Vue outside of components without getting warnings?

You're misusing provide/inject. See stackoverflow.com/questions/70607332/… — Estus Flask
– Estus Flask, Commented Jan 13, 2022 at 17:34

Michal Levý · Accepted Answer · 2022-01-13 16:27:23Z

1

No, there is no way to use the provide/inject outside of components

Just create and export singleton instance of your service. Use inject in components and use direct import anywhere else...

answered Jan 13, 2022 at 16:27

Michal Levý

38.6k8 gold badges82 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Use Vue3 inject inside a Typescript class

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related