I want to create an npm package that will render a textbox and a button.
In this npm package, I want to use primevue Button component.

This is the published package link: vue-main-package

I use this package in another vue app after doing ‘npm install vue-main-package‘

This is npm module source code.

index.js file

import CustomButton from "./components/CustomButton.vue";
import Search from "./components/Search.vue";

  export default {
    install: (app, options) => {
      app.component("CustomButton", CustomButton);
    },
  };

main.js file

import { createApp } from "vue";
import PrimeVue from "primevue/config";
import Aura from "@primevue/themes/aura";
// import Aura from "@primevue/themes/aura"
// import {definePreset} from "@primevue/themes"
import "./style.css";
import App from "./App.vue";
import Button from "primevue/button";
import InputText from "primevue/inputtext";
import FloatLabel from "primevue/floatlabel";

const app = createApp(App);

app.use(PrimeVue, {
  // Default theme configuration
  theme: {
    preset: Aura
  },
});
app.component("Button", Button);
app.component("InputText", InputText);
app.component("FloatLabel", FloatLabel);
app.mount("#app");

vite.config.js file

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "node:path";

// const path = require("path");
// https://vitejs.dev/config/
export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, "src/index.js"),
      name: "vue-main-package",
      fileName: (format) => `vue-main-package.${format}.js`,
    },

    rollupOptions: {
      external: ["vue"],
      output: {
        globals: {
          vue: "Vue",
        },
      },
    },
  },
  plugins: [vue()],
});

This is the test application source code. This vue application uses the ‘vue-main-package’ module.

main.js file

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import CustomButton from "vue-main-package";
import "vue-main-package/dist/style.css";

const app = createApp(App);
app.use(CustomButton);
app.mount("#app");

App.vue file

<script setup></script>

<template>
  <div>
    <CustomButton text="text-pkg"></CustomButton>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

When I run the app, It gives me this error,

chunk-LAPRAAXM.js?v=cfdfa930:1528 
[Vue warn]: Failed to resolve component: Button
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <CustomButton text="text-pkg" > 
  at <App>

I want to know the correct way to use primevue in an npm module.

Is there any document available?

How can we resolve this error and make primevue component available in npm module?