nuxt-fable v0.0.1

Nuxt Fable

Nuxt module to view and work on components in isolation with Vue SFCs.

!WARNING This is a small tool I built for myself. It's not tested and not optimized. There are probably a lot of bugs and edge cases. I apply fixes and features as I need them.

Quick Setup

1. Add nuxt-fable dependency to your project

# Using pnpm
pnpm add -D nuxt-fable

# Using yarn
yarn add --dev nuxt-fable

# Using npm
npm install --save-dev nuxt-fable

2. Add nuxt-fable to the modules section of nuxt.config.ts

export default defineNuxtConfig({
	modules: [
		'nuxt-fable'
	]
})

3. Create a stories folder in the root of your project and add SFCs with .story.vue like Button.story.vue. Define story variants with the provided <Variant> component.

<template>
	<Variant title="Button Variants">
		<MyButton primary>Hello World</MyButton>
		<MyButton secondary>Hello World</MyButton>
	</Variant>
	<Variant title="Button Sizes">
		<MyButton primary size="sm">Small Button</MyButton>
		<MyButton primary size="default">Default Button</MyButton>
		<MyButton primary size="large">Large Button</MyButton>
	</Variant>
</template>

If you want to use the whole page for a story use the page-mode prop for the <Variant> component.

<template>
	<Variant title="Authentication Form" :page-mode="true">
		<form>
			<!-- .... -->
		</form>
	</Variant>
</template>

To see your stories run your dev server and go to /story.

Per default the module won't be included in your build. If you want to deploy the stories too you can set devOnly: false in the module options.

export default defineNuxtConfig({
	modules: [
		'nuxt-fable'
	],
	fable: {
		devOnly: false,
	}
})

That's it! You can now use Nuxt Fable in your Nuxt app ✨

Development

# Install dependencies
pnpm install

# Develop with the playground
pnpm run dev

# Release new version
pnpm run prerelease

# because changelogen reformats package.json
pnpm run lint:fix

# Commit and tag the new version
git add . && git commit -m "Release v0.0.0" && git tag v0.0.0

pnpm run release