Storybook publish package

Prepare package.json

{
  "name": "@avorsterman/vue-components",
  "version": "0.0.3",
  "description": "Reusable Vue 3 components with Vuetify",
  "private": false,
  "type": "module",
  "main": "dist/vue-components.umd.js",
  "module": "dist/vue-components.es.js",
  "exports": {
    "import": "./dist/vue-components.es.js",
    "require": "./dist/vue-components.umd.js"
  },
  "files": [
    "dist"
  ],
  "publishConfig": {
    "access": "public"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "peerDependencies": {
    "vue": "^3.4.31",
    "vuetify": "^3.6.14"
  },
  "dependencies": {
    "@mdi/font": "7.4.47",
    "roboto-fontface": "*"
  },
  "devDependencies": {
    "@chromatic-com/storybook": "^3.2.4",
    "@storybook/addon-essentials": "^8.5.2",
    "@storybook/addon-interactions": "^8.5.2",
    "@storybook/addon-onboarding": "^8.5.2",
    "@storybook/blocks": "^8.5.2",
    "@storybook/test": "^8.5.2",
    "@storybook/vue3": "^8.5.2",
    "@storybook/vue3-vite": "^8.5.2",
    "@vitejs/plugin-vue": "^5.0.5",
    "sass": "1.77.8",
    "sass-embedded": "^1.77.8",
    "storybook": "^8.5.2",
    "unplugin-fonts": "^1.1.1",
    "unplugin-vue-components": "^0.27.2",
    "vite": "^5.4.0",
    "vite-plugin-vuetify": "^2.0.3"
  }
}

Login to NPM

npm login

Publish to NPM

npm run build && npm version patch && npm publish --access public

Install in another app

npm i @avorsterman/vue-components

Example usage in Vue template

<template>
  <v-app>
    <v-main class="pa-4">
      <aw-form :hide-delete="true" button-variant="plain" title="Settings" subtitle=""/>
    </v-main>

    <AppFooter />
  </v-app>
</template>

<script setup>
import { AwForm } from "@avorsterman/vue-components";
</script>