.$ notation in nuxt3 and accessing it

Question

I am using keycloak-js in my Nuxt3 app. There is this line in the plugin code ...

app.$keycloak = keycloak;

How can I access the value stored in app.$keycloak in my pages (pages/*.vue)?

Of specific interest to me is the token (access_token). How can I get it?

And I want the ability to auto inject the Authorization: Bearer <token> header whenever I make a call to /api/... endpoints of an external server. How can I do that?

Thanks

Answer 1

Managed to get it working in a page thus ...

<template>
  {{ useNuxtApp().$keycloak }}
</template>