Home

Welcome to my Nuxt-TypeScript-Storybook Template

This project can be reused as it is hard to setup storybook manually along with Vuetify

Structure

In this nuxt application, the nuxt.config.js contains the basic attrs for storybook configuration and the main config files will be under .storybook directory

Stack info

This project was initiated using node@v16.13.2 and npm@8.3.0

Probable errors

• Error message "error:0308010C:digital envelope routines::unsupported"

This error is because you are using a nodejs version that is probably unstable or upgraded than the current one

It can be resolved by adding this command in terminal:

# Linux & Mac OS (windows git bash)-

export NODE_OPTIONS=--openssl-legacy-provider

# Windows command prompt-

set NODE_OPTIONS=--openssl-legacy-provider

Customizing our storybook theme

Custom theme overrides can be found under .storybook/EgabTheme.js

// .storybook/EgabTheme.js
import { create } from "@storybook/theming";
import EgabLogo from '../static/egab.png'

export default create({
  base: 'dark',
  brandTitle: 'Egab',
  brandImage: EgabLogo,
  appBg: '#242424',
  appContentBg: '#333333',
  textColor: '#C76758',
  barSelectedColor: '#77A11D',
});

and exported to .storybook/manager.js which sets the theme to the custom one