typescriptvuejs3

How do I create and setup a Vue 3 typescript Plugin?


I am trying to create a new Plugin in Vue 3 using Typescript.

My Code generally is:

//somePlugin
import { App, Plugin } from "vue";

const somePlugin: Plugin = {
  install: async (app: App, options: {...}): Promise<void> => {
    ....
  }
}
export { somePlugin };
//----------------------------------------------------------
//main.ts
import { somePlugin } from "@/plugins/somePlugin";
import App from "./App.vue";

const app = createApp(App);
app.use(somePlugin);

I however get the following Error:

Cannot find module '@/plugins/somePlugin' or its corresponding type declarations.ts(2307)

I a bit new to Typescript to be honest, but I thought that "somePlugin" is defined by the Vue internal "Plugin" and therefore is completely typed and declared.

Following the answers of similar Problems I guessed I should create a "somePlugin.d.ts", but I don't really know what I should declare here but I tried this:

declare module "somePlugin";

But that didn't work. So I either need a working example of a Vue 3 Typescript Plugin or a Tip on how to declare that Plugin so it works.

I also would like to refrein of using ts-ignore.


Solution

  • In my case, I embarrassingly have to admit, that it was caused by a wrong link.