4

I'm brand new to Vue. The documentation says that the "setup" composition API is likely to be the one supported in the future so I'm trying to use that form everywhere.

I want to use a plugin, but I can't work out how to get access to it in the setup API format.

Here is the supplied example of how to do it in Composition API:

const authCode = await this.$gAuth.getAuthCode();

When I try to use the plugin in setup form of composition API then I get an error "Cannot read properties of undefined (reading '$gAuth') "

The LOC that is producing that error looks like this:

<script setup lang="ts">
... stuff ...
const googleUser = await this.$gAuth.signIn();

My main.ts looks like this:

import gAuthPlugin  from "vue3-google-oauth2";

app.use(gAuthPlugin , {
  clientId: "768834812579-ivi0oopbkqe05cg6t41p83t7gteekut6.apps.googleusercontent.com",
  scope: "email",
  prompt: "consent",
  fetch_basic_profile: false,
});

I can see that the plugin is defining a global property (here), which the Vue documentation says can be accessed on any component instance inside the application.

But the documentation only shows an example for composition (without setup) and I can't work out the syntax for this. It's quite similar to the problem raised in the comment to this downvoted answer (the actual answer didn't help me there).

Andy
  • 2,095
  • 1
  • 29
  • 59
  • 5
    You cannot use `this` within setup, only within methods or computed properties. If you want to use `$gAuth` as a global property within setup, this discussion might help: `https://forum.vuejs.org/t/how-to-use-globalproperties-in-vue-3-setup-method/108387/3` – Nechoj Apr 17 '22 at 13:12
  • Where in the docs do you see: `The documentation says that the "setup" composition API is likely to be the one supported in the future so I'm trying to use that form everywhere.`? – tony19 Apr 17 '22 at 23:46
  • I think you're right - I can't find it in the official documentation. In fact the official documentation says the opposite - that there are no plans to drop support for options API. – Andy Apr 18 '22 at 09:19
  • 1
    Indeed, it's a [common misconception](https://stackoverflow.com/questions/68611657/do-i-have-to-use-the-composition-api-in-vue-3-or-can-i-still-do-things-the-vue/68628205#68628205). – tony19 Apr 20 '22 at 04:34

0 Answers0