I am using vuetify 3 in my vue 3 project. I have defined aliases and defaults :
./src/plugins/vuetify.ts
...
export default createVuetify({
aliases: {
MyBtn: VBtn,
},
defaults: {
VTextField: {
variant: "underlined",
},
MyBtn: {
size: "small",
},
},
});
This is working in the project containing the file. But I don't know how to have these styles still applied when I publish the component as an npm package, and import it in another project.
This is my current npm package configuration :
./lib/main.js
import MyComponent from "@/components/MyComponent.vue";
export { MyComponent };
./package.json
{
...
"main": "./dist/my-component.umd.js",
"module": "./dist/my-component.es.js",
"files": [
"dist",
"src/types"
],
"exports": {
".": {
"import": "./dist/my-component.es.js",
"require": "./dist/my-component.umd.js"
},
"./dist/style.css": "./dist/style.css"
},
}
./vite.config.ts
...
import vuetify from "vite-plugin-vuetify";
export default defineConfig({
...
build: {
lib: {
entry: path.resolve(__dirname, "lib/main.js"),
name: "MyComponent",
fileName: (format) => `my-component.${format}.js`,
},
rollupOptions: {
external: ["vue"],
output: {
globals: {
vue: "Vue",
},
},
},
},
});
How can I "export" the aliases and defaults from my ./src/plugins/vuetify.ts
file to have them rendered when I import my component in another project ?
Thank you