storybook-vue3-router - npm Package Compare versions

storybook-vue3-router

Package Overview

Dependencies

Maintainers

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.0.0 to 1.0.1

package.json

		{
		"name": "storybook-vue3-router",
		"version": "1.0.0",
		"description": "Vue 3 & Vue Router 4+ Storybook Integration",
		"version": "1.0.1",
		"description": "A Storybook decorator that allows you to build stories for your routing-aware components.",
		"keywords": [
		@@ -6,0 +6,0 @@ "storybook-addons",

README.md

		# Storybook Vue 3 Router

		Integration of Vue 3 and Vue Router v4 in Storybook stories.
		A Storybook decorator that allows you to use your routing-aware components.

		You will need to use this plugin if you wish to include stories for any component using Vue Router v4+ `<router-view>` and `<router-link>`
		You will need to use this plugin if you wish to include stories for any component using Vue Router v4 `<router-view>` and `<router-link>`

		![Storybook with Vue 3 Router Integration](https://github.com/NickMcBurney/storybook-vue-router/blob/main/storybook-vue-router.gif?raw=true)
		Vue Router v4 is used with Vue 3 projects.

		@@ -12,5 +12,24 @@ ## Install

		## Usage
		After installing you can import the Storybook decorator and start working with components using Vue Router v4+
		## Quick Usage
		After installing you can import the Storybook decorator and start working with components using Vue Router v4

		```ts
		/* import Storybook addon (decorator for Vue Router) */
		import vueRouter from 'storybook-vue3-router'

		/* ...story setup... */

		/* your story export */
		export const Default = Template.bind({})

		/* adding custom decorator to allow use of `<router-view>` and Vue Router 4+ */
		Default.decorators = [
		vueRouter()
		]
		```

		![Storybook with Vue 3 Router Integration](https://github.com/NickMcBurney/storybook-vue-router/blob/main/storybook-vue-router.gif?raw=true)

		## Full Example
		```ts
		/* import `action` to log router changes (this can be used by this addon to log router events) */
		@@ -20,3 +39,3 @@ import { action } from '@storybook/addon-actions';
		/* import Storybook addon (decorator for Vue Router) */
		import vueRouter from 'storybook-addon-vue-router'
		import vueRouter from 'storybook-vue3-router'

		@@ -40,3 +59,3 @@ /* component you're writing story for */
		})
		/* youur story export */
		/* your story export */
		export const Default = Template.bind({})
		@@ -57,7 +76,7 @@

		Which will:
		#### Which will:
		- Use this packages default routes (`/` and `/about` routes, with `<router-link>` for each route)
		- Add a Storybook action to log the route changes

		### Pass custom routes
		## Custom routes
		You can pass custom router setup by including (or importing into your `.stories.` file) and passing this as the first parametor within the `vueRouter` decorator:
		@@ -64,0 +83,0 @@

Improved metrics