What is causing the error Cannot find name 'useSupabaseClient'. when using Nuxt 3 and Supabase?

Using npm I have installed Nuxt 3 and Supabase but in vs code I keep getting the following error;

Cannot find name 'useSupabaseClient'.

When I run npm run dev I get the following error message on the page in the browser;

500 
useSupabaseClient is not defined

at _sfc_main.setup (C:\Users\User\Desktop\New folder (3)\supabase_nuxt\app.js:32:23)
at callWithErrorHandling (C:\Users\User\Desktop\New folder (3)\supabase_nuxt\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:193:18)
at setupStatefulComponent (C:\Users\User\Desktop\New folder (3)\supabase_nuxt\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7538:25)
at setupComponent (C:\Users\User\Desktop\New folder (3)\supabase_nuxt\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7499:36)
at renderComponentVNode (C:\Users\User\Desktop\New folder (3)\supabase_nuxt\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:642:15)
at Module.ssrRenderComponent (C:\Users\User\Desktop\New folder (3)\supabase_nuxt\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:91:10)
at default (C:\Users\User\Desktop\New folder (3)\supabase_nuxt\node_modules\nuxt\dist\app\components\nuxt-root.js:76:37)
at Module.ssrRenderSuspense (C:\Users\User\Desktop\New folder (3)\supabase_nuxt\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:489:5)
at _sfc_ssrRender (C:\Users\User\Desktop\New folder (3)\supabase_nuxt\node_modules\nuxt\dist\app\components\nuxt-root.js:67:25)

What is causing this issue?

Below is some additional information.

package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxtjs/supabase": "^1.1.5",
    "nuxt": "^3.9.0",
    "vue": "^3.4.6",
    "vue-router": "^4.2.5"
  }
}

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@nuxtjs/supabase'],
});

My .env file has the correct Supabase credentials

.env

SUPABASE_URL="https://example.supabase.co"
SUPABASE_KEY="<your_key>"

app.vue

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>
<script setup lang="ts">
const client = useSupabaseClient()
</script>

I did the following;

1. Made sure that the Supabase credentials (like the Supabase key and url) in the .env are correct. 2``Updated node to the current version which is 20.11.0.
2. Verified that the Supabase client is installed by using the npm list @supabase/supabase-js command. It showed the following;

@nuxtjs/[email protected]
  └── @supabase/[email protected]

4.Restarting the development server.