Vue 3 + Vite

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Learn more about IDE Support for Vue in the Vue Docs Scaling up Guide.

AVA Storybook

Docs

AVA Storybook Docs

Usage in a Vue 3 project

Install

npm i ava-storybook

Update

npm i ava-storybook@latest 

Usage

main.js

import * as storybook from 'ava-storybook'
import 'ava-storybook/dist/style.css'
import 'ava-storybook/dist/output.css'

const app = createApp(App)
// Make components available globally to the project
app.component('Button', storybook.Button)
app.component('IconButton', storybook.IconButton)
app.component('ToggleSwitch', storybook.ToggleSwitch)
app.component('Checkbox', storybook.CheckboxInput)
app.component('Dropdown', storybook.DropdownInput)
app.component('Radio', storybook.RadioInput)
app.component('TextInput', storybook.TextInput)

app.mount('#app')

Component

<template>
	<Button label="Hello World" theme="primary-70" />
</template>

Development

npm run storybook

Publish Package

Run Storybook Build and Push Changes to Github

This creates the static site for the storybook

npm run build-storybook

Login to NPM

npm login

Patch - (e.g., 1.0.0 to 1.0.1)

Minor - (e.g., 1.0.0 to 1.1.0)

Major - (e.g., 1.0.0 to 2.0.0)

Set custom version

npm version 1.2.3

Publish

npm run build
<!-- Push to Github -->
npm version <patch | minor | major>
npm publish

Check current version

npm view ava-storybook version

Build Storybook

npm run build-storybook

Push your changes to github and view the docs at:

AVA Storybook Docs