add support for @nuxtjs/composition-api

[maemaemae3]

Hi, I want to use this module with @nuxtjs/composition-api, so I tried to use it from useContext();, but it doesn't work.

import { defineComponent, onMounted, useContext } from '@nuxtjs/composition-api';

export default defineComponent({
  setup() {

    const { $recaptcha } = useContext();

    onMounted(async () => {
      await $recaptcha.init();
    });

    ...

  }
})

Then, I found that there is no type definition for useContext(), so I added this part to index.d.ts, but it seems not working,

declare module '@nuxt/types' {
  interface Context {
    $recaptcha: ReCaptchaInstance
  }
}

However, when I added this to my components directly, it works perfectly.

import { ReCaptchaInstance } from '@nuxtjs/recaptcha';

declare module '@nuxt/types' {
  interface Context {
    $recaptcha: ReCaptchaInstance
  }
}

Am I doing something wrong? If there is some other way to make it work with adding type definition to index.d.ts, I'll do it and make a PR.

[mvrlin]

@maemaemae3 Hey! You can use it throught the root

export default defineComponent({
  setup(_, { root }) {
    const recaptcha = root.$recaptcha
    
    onMounted(async () => {
      await recaptcha.init()
    })
  },
})

[maemaemae3]

@mvrlin Hi, thank you for your quick reply! However, it looks like root is being deprecated. https://github.com/vuejs/composition-api/blob/master/src/component/componentOptions.ts#L18

[Red-Asuka]

The same problem bothered me

[weicheng2138]

Hi, I want to use this module with @nuxtjs/composition-api, so I tried to use it from useContext();, but it doesn't work.

import { defineComponent, onMounted, useContext } from '@nuxtjs/composition-api';

export default defineComponent({
  setup() {

    const { $recaptcha } = useContext();

    onMounted(async () => {
      await $recaptcha.init();
    });

    ...

  }
})

Then, I found that there is no type definition for useContext(), so I added this part to index.d.ts, but it seems not working,

declare module '@nuxt/types' {
  interface Context {
    $recaptcha: ReCaptchaInstance
  }
}

However, when I added this to my components directly, it works perfectly.

import { ReCaptchaInstance } from '@nuxtjs/recaptcha';

declare module '@nuxt/types' {
  interface Context {
    $recaptcha: ReCaptchaInstance
  }
}

Am I doing something wrong? If there is some other way to make it work with adding type definition to index.d.ts, I'll do it and make a PR.

I was thinking that i should config "@nuxtjs/recaptcha" in tsconfig.json. But it doesn't work at all. "compilerOptions": { "types": [ "@nuxtjs/recaptcha", ] },

Then I did your way to add the type definition in index.d.ts and every works fine. Of course remember to set the siteKey in nuxt.config.js

You save my day.

[emretepedev]

The same problem bothered me

@weicheng2138 below codes work like a charm for me. good luck!

in package.json

{
    "dependencies": {
        "nuxt": "2.15.8",
        "@nuxtjs/composition-api": "^0.31.0",
        "@nuxtjs/recaptcha": "^1.0.4",
    },
}

in nuxt.config.js,

export default {
    modules: [
        '@nuxtjs/recaptcha',
    ],

    recaptcha: {
        /* your  config here */
    },
}

in *.vue

import { defineComponent, useContext, onMounted } from '@nuxtjs/composition-api'

export default defineComponent({
  setup() {
    // context
    const { $recaptcha } = useContext()
    
    // hooks
    onMounted(async () => {
      await $recaptcha.init() // replace with `init`, whatever you want
    })
  }
})

if doesn't work, try this:

in *.vue

import { defineComponent, onMounted } from '@nuxtjs/composition-api'

export default defineComponent({
  setup(_, context) {
    // root variables
    const $recaptcha= context.root.$recaptcha
    
    // hooks
    onMounted(async () => {
      await $recaptcha.init() // replace with `init`, whatever you want
    })
  }
})

[weicheng2138]

in *.vue

import { defineComponent, onMounted } from '@nuxtjs/composition-api'

export default defineComponent({
  setup(_, context) {
    // root variables
    const $recaptcha= context.root.$recaptcha
    
    // hooks
    onMounted(async () => {
      await $recaptcha.init() // replace with `init`, whatever you want
    })
  }
})

@emretepedev Thanks for your solution. It does the work very well. However, it show up with deprecated message below.

If you are going to to migrate your project to Nuxt 3, you may need to think about it.

[emretepedev]

@emretepedev Thanks for your solution. It does the work very well. However, it show up with deprecated message below.

If you are going to to migrate your project to Nuxt 3, you may need to think about it.

i'll investigate this situation however i did not use with root. i use useContext(). Did you try that? Do you have any error?

[weicheng2138]

i'll investigate this situation however i did not use with root. i use useContext(). Did you try that? Do you have any error?

@emretepedev I do use useContext() and it works fine. But there is no full typing and autocompletion support.

After adding the code below in index.d.ts, typing and autocompletion support are back.

import { ReCaptchaInstance } from '@nuxtjs/recaptcha';

declare module '@nuxt/types' {
  interface Context {
    $recaptcha: ReCaptchaInstance
  }
}

[Arias-xss]

Why do you use it with wrapProperty

Here an example

const useRecaptcha = wrapProperty('$recaptcha', false)

const recaptcha = useRecaptcha()

And then call the functions.

[maemaemae3]

Thanks a lot for replies. I'm not using this module for a long time, and there is already a workaround like I showed, so let me close this issue for now.