Import Vuetify components in your npm package without importing it again in other projects

Question

I created a npm package for UI components by using Vue 3,Vuetify 3 and vite. You get warning When you use it in another project because it can not read Vuetify's components! For solving that you can install Vuetify again in the project that has been used in that package!.

The warning that I got in the project:

[Vue warn]: Failed to resolve component: v-btn
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

//package project : vite.config.js 

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
import vuetify from "vite-plugin-vuetify";

import Components from 'unplugin-vue-components/vite'
import { VuetifyResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
  plugins: [vue(), cssInjectedByJsPlugin(),
    Components({
      dirs: ['vuetify/es5/components', 'vuetify/es5/components/card'],
      extensions: ['vue'],
      resolvers: [VuetifyResolver()],
    }),

  //   vuetify({
  //   autoImport: true,
  //
  // })

  ],
  resolve: {
    alias: {
      "@/": new URL("./src/", import.meta.url).pathname,
    },
    
  },

  build: {
    cssCodeSplit: true,
    target: "esnext",
    lib: {
      entry: path.resolve(__dirname, "src/index.ts"),
      name: "GithubPackagesUiLibrary",
      fileName: (format) => `asdon.${format}.js`,
    },

    rollupOptions: {
      external: ['vue' , 'vuetify'],
      output: {
        // Provide global variables to use in the UMD build
        // for externalized deps
        globals: {
          vue: 'Vue',
          vuetify: 'Vuetify',
          'vuetify/components': 'VuetifyComponents',
          'vuetify/directives': 'VuetifyDirectives'
        },
      },
    },
  },
});

//package project : main.ts


import { createApp } from "vue";
import App from "@/App.vue";
import vuetify from '@/plugins/vuetify'

import 'vuetify/dist/vuetify.min.css'
import {VBtn} from "vuetify/components/VBtn";

export const myPlugin = {
    install(app:any) {
        app.component("v-btn", VBtn);


    }
}
createApp(App).use(vuetify).use(myPlugin).mount("#app");