I have recently set up a new project using Vue.js 3 and TypeScript by running the command npm init vue@latest. I now want to integrate reCaptcha v2 into the project from scratch, without relying on pre-existing libraries like vue3-recaptcha-v2.
Instead of manually defining the grecaptcha object myself, I opted to use npm i -D @types/grecaptcha with the expectation of having access to the global variable grecaptcha. However, my Visual Studio Code editor is unable to recognize this variable.
Here is a screenshot:
vite.config.js
import vueI18n from "@intlify/vite-plugin-vue-i18n";
import vue from "@vitejs/plugin-vue";
import { fileURLToPath, URL } from "url";
import { defineConfig } from "vite";
// Vite configuration
export default defineConfig({
plugins: [vue(), vueI18n({ useVueI18nImportName: true })],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
});
tsconfig.json
{
"extends": "@vue/tsconfig/tsconfig.web.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"compilerOptions": {
"baseUrl": ".",
"types": ["element-plus/global", "@intlify/vite-plugin-vue-i18n/client"],
"paths": {
"@/*": ["./src/*"]
}
},
"references": [
{
"path": "./tsconfig.config.json"
}
]
}
tsconfig.config.json
{
"extends": "@vue/tsconfig/tsconfig.node.json",
"include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
"compilerOptions": {
"composite": true,
"types": ["node"]
}
}
These files are generated automatically when using the npm init vue@latest command. How can I configure VSCode to recognize global variables from https://github.com/DefinitelyTyped/DefinitelyTyped?
Thank you in advance!