Storybook publish package: Difference between revisions
From AWVVO
Jump to navigationJump to search
Created page with "== Prepare package.json == <syntaxhighlight lang="json" highlight="1,3-11, 13,14, 16,17" line copy> { "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": [ "d..." |
|||
| (One intermediate revision by the same user not shown) | |||
| Line 1: | Line 1: | ||
== Prepare package.json == | == Prepare package.json == | ||
<syntaxhighlight lang="json" highlight=" | <syntaxhighlight lang="json" highlight="2-11, 13,14, 16,17" line copy> | ||
{ | { | ||
"name": "@avorsterman/vue-components", | "name": "@avorsterman/vue-components", | ||
| Line 53: | Line 53: | ||
} | } | ||
} | } | ||
</syntaxhighlight> | |||
== Login to NPM == | |||
<syntaxhighlight lang="bash" copy> | |||
npm login | |||
</syntaxhighlight> | </syntaxhighlight> | ||
Latest revision as of 06:52, 5 February 2025
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>
