1

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

Marion
  • 11
  • 1
  • If another project imports your published project, how is it meant to use Vuetify? – Moritz Ringler May 30 '23 at 14:17
  • I don't want the another project to have to do anything more than just importing the npm package, and have the component looking like what it is supposed to be – Marion May 31 '23 at 07:27
  • Same here Any Update ! I update my vite.config to the following but still not works !! – Gaş Bîn Jun 23 '23 at 14:55

0 Answers0