Vue Styleguidist

# Examples

In the repository (opens new window), there are a few example styleguides. Each tries to demonstrate one key aspect of what you can do with the library. Check out the github links to see how it's done.

# basic

Example of vue-styleguidist tested on IE11, please have a look at the webpack config of babel

Keywords: internet explorer, compatible, IE11,

# customised

The general interface of the output styleguide can be completely changed. Style and assets.

Keywords: styled, feature rich, branding, beautiful,

# dashed-component

Here we experiment how to mock the router in your showcases

Keywords: routing, window, global, mock, vue-router, router-link,

# docgen

Use vue-docgen-cli to integrate with vuepress sites

Keywords: vuepress, docgen, cli, vue-live, markdown,

# docgen-vite

# functional-flag

Example of vue-styleguidist with functional tag

Keywords: functional, customized,

# jsx

Even components using JSX templates are documented

# jsx-examples

Examples can contain jsx too

Keywords: jsx, sucrase, compiler, vue examples, functional,

# nuxtjs

Use beside Nuxt.js and generate your styleguide besides your main app

Keywords: nuxt, nuxtjs, production ready, scaffolding,

# router

Here we experiment how to mock the router in your showcases

Keywords: routing, window, global, mock, vue-router, router-link,

# sections

To group components, sections are useful. Look at the left menu of this example

# svg-loader

Here is an example of what can be done using an extenal loader. Observe that the loader added to the cli is automatically added to styleguidist.

# vuecli-noplugin

What happens if you try to use the Vue CLI 3, install styleguidist, and omit to use the plugin

# vuecli3

When using vue cli 3, prefer using the plugin using vue add styleguidist

# vuecli3-class-pug-ts

Here we showcase the wide variety of technologies vue-styleguidist supports

Keywords: technologies, typescript, sass, class-component,

# vuecli3-custom

If you want to customize the styleguide and use the vue cli plugin change a little bit your babel config. This way your styleguide compoents are compiled with react jsx engine instead of vue

Keywords: styled, feature rich, branding, beautiful, vuecli3, plugin,

# vuecli3-vuetify-ie

Use vuetify, with internationalization within the vue cli. Make sure you have a look at the vue.config.js transpiledDependencies

Keywords: internet explorer, compatible, IE11, vuetify, i18n,

# vueds

Example of vue-styleguidist tested on IE11, please have a look at the webpack config of babel

Keywords: internet explorer, compatible, IE11,

# vuetify

No need to create your very own library to show it off with styleguidist. Use all common libraries. If they are compatible with vue, they should be compatible with styleguidist.

# vuex

To use vuex or vue-router you might need some trickery. Have a look at the config/styleguide.root.js file to get ideas on what to try.

# with-laravel-token

This example is a way to demontrate how to initialize global/window context usable by every component

Keywords: laravel, token, CSRF, window, global,

# with-sass-loader

In this example, we try loading colors in each vue sfc. Just a head's up, it does not work anymore...