CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvuetify.jsvue-cli-3
menteora
menteora

Reputation: 43

How to create my own component library based on Vuetify

I want create my component library based on Vuetify and publish on npm.

Vuetify has already vue-plugin standard installation and use vuetify-loader, I think was a more complex scenario than plain HTML component.

For example, I want create my Login Form, my Article Page, my default calendar picker with preset values.

There's a standard way or guide to do this or a sample to do that?

I use last version of vuetify (2.0.7)

Upvotes: 4

Views: 4470

Answers (1)

svenema
svenema

Reputation: 2506

I just got it working for Vue3/Vuetify3. In a nutshell (using pnpm, vite, typescript, Vue plugin):

Create the component as a new project:

pnpm create vue@latest
-> your-plugin
-> Typescript
-> ESLint
cd <project>
echo auto-install-peers = true > .npmrc
pnpm add -D vuetify rollup-plugin-typescript2

Then remove all the components and make your own component instead. Create src\components\index.ts and src\YourPlugin.ts

src\components\index.ts

export {default as YourComponent} from "./YourComponent.vue"

src\YourPlugin.ts

import type { App } from "vue"
import { YourComponent } from "./components"
export default {
    install: (app: App) => {
        app.component("YourComponent", YourComponent)
    }
};

vite.config.ts

Add to the imports:

import vuetify from 'vite-plugin-vuetify'
import typeScript2 from "rollup-plugin-typescript2"

Add to the plugins:

vuetify({
  autoImport: true,
}),
typeScript2({
  check: false,
  include: ["src/components/*.vue"],
  tsconfigOverride: {
    compilerOptions: {
      sourceMap: true,
      declaration: true,
      declarationMap: true,
    }
  },
  exclude: [
    "vite.config.ts"
  ]
})

Add a new section build to the defineConfig:

  build: {
    cssCodeSplit: false,
    lib: {
      entry: "./src/YourPlugin.ts",
      formats: ["es", "cjs"],
      name: "CommonVtfyPlugin",
      fileName: format => (format == "es" ? "index.js" : "index.cjs"),
    },
    rollupOptions: {
      external: ["vue", "vuetify/lib"],
      output: {
        globals: {
          vue: "Vue",
          vuetify: "Vuetify",
            'vuetify/components': 'VuetifyComponents',
            'vuetify/directives': 'VuetifyDirectives'
        }
      }
    }
  },

dist\index.d.ts

I have not figured out how to generate this on yet. But this is a generic stand in:

declare const _default: any;
export default _default;

package.json

Add this:

  "type": "module",
  "exports": {
    ".": "./dist/index.js"
  },
  "types": "./dist/index.d.ts",
  "files": [
    "dist"
  ],

You can use it in any Vue project by importing it as a plugin:

import YourComponent from 'your-plugin'
app.use(YourComponent)

No guarantees on how optimized that is (feedback welcome).. but it works (tm).. A more detailed answer can be found pnpm monorepo: how to set up a simple reusable (vue) component for reuse? (any updates will primarily be updated in that answer as well, if any)

Upvotes: 3

Related Questions