I’m working on creating a Nuxt plugin which is usually a straightforward process. I created a file called cryptography.ts within plugins/ folder and coded the following:

// plugins/cryptography.ts

import CryptoJs from "crypto-js"


export default defineNuxtPlugin(() => {
  return {
    provide: {
      encrypt: (value: string, secret_key: string) => {
        var bytes = CryptoJS.AES.encrypt(value, secret_key).toString();

        return bytes;
      },
      decrypt: (value: string, secret: string) => {
        var decrypted = CryptoJS.AES.decrypt(value, secret).toString(
          CryptoJS.enc.Utf8
        );

        return decrypted;
      },
    },
  };
});

Once done, I used the plugin in one of my components:

<script setup lang="ts">
 const { $encrypt } = useNuxtApp()
 $encrypt('somekey', 'secretkey')
</script>

Unfortunately the $encrypt threw the following error:
'$encrypt' is of type 'unknown'.ts-plugin(18046)

To resolve this, I tried adding it to my d.ts file in the root folder.

declare module "#app" {
  interface NuxtApp {
    $encrypt: any;
  }
}

declare module "vue" {
  interface ComponentCustomProperties {
    $encrypt: any;
  }
}

export {};

It still doesn’t work. I’m not sure what the root cause is. Even tried placing the the .d.ts files within /types/ and configuring my ts-config.json to the following:

{
  // https://nuxt.com/docs/guide/concepts/typescript
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "moduleResolution": "node",
    "baseUrl": ".",
    "target": "ES2022",
    "module": "ESNext",
    "types": ["./types/**/*.d.ts"],
    "paths": {
      "@/*": ["./*"]
    }
  }
}

It still wouldn’t pick up on the type. Can you please help me? Many Thanks!