Examples.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Examples | Vue Styleguidist</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png">
    <link rel="mask-icon" href="/assets/favicons/safari-pinned-tab.svg" color="#41B883">
    <link rel="shortcut icon" type="image/x-icon" href="/assets/favicons/favicon.ico">
    <script src="https://unpkg.com/thesemetrics@latest" async=""></script>
    <meta name="description" content="Isolated Vue component development environment with a living style guide">
    <meta prefix="og: http://ogp.me/ns#" property="og:title" content="Vue Styleguidist docs">
    <meta prefix="og: http://ogp.me/ns#" property="twitter:title" content="Vue Styleguidist docs">
    <meta prefix="og: http://ogp.me/ns#" property="og:type" content="website">
    <meta prefix="og: http://ogp.me/ns#" property="og:description" content="Isolated Vue component development environment with a living style guide">
    <meta prefix="og: http://ogp.me/ns#" property="og:image" content="/assets/logo.png">
    
    <link rel="preload" href="/assets/css/0.styles.6cca0d72.css" as="style"><link rel="preload" href="/assets/js/app.3c212ffd.js" as="script"><link rel="preload" href="/assets/js/3.4a2a9d93.js" as="script"><link rel="preload" href="/assets/js/9.0bad6c21.js" as="script"><link rel="prefetch" href="/assets/js/10.9deede29.js"><link rel="prefetch" href="/assets/js/11.ed576d58.js"><link rel="prefetch" href="/assets/js/12.cde92b93.js"><link rel="prefetch" href="/assets/js/13.96baa9be.js"><link rel="prefetch" href="/assets/js/14.be8d5859.js"><link rel="prefetch" href="/assets/js/15.053a800d.js"><link rel="prefetch" href="/assets/js/16.c86ff6eb.js"><link rel="prefetch" href="/assets/js/17.a5bd2f70.js"><link rel="prefetch" href="/assets/js/18.904d8817.js"><link rel="prefetch" href="/assets/js/19.c51e966c.js"><link rel="prefetch" href="/assets/js/20.319ae483.js"><link rel="prefetch" href="/assets/js/21.534c66d1.js"><link rel="prefetch" href="/assets/js/22.352e55a6.js"><link rel="prefetch" href="/assets/js/23.b02a1c93.js"><link rel="prefetch" href="/assets/js/24.4dd9e5be.js"><link rel="prefetch" href="/assets/js/4.057c31d3.js"><link rel="prefetch" href="/assets/js/5.95773a2d.js"><link rel="prefetch" href="/assets/js/6.11513ce4.js"><link rel="prefetch" href="/assets/js/7.c2bfa264.js"><link rel="prefetch" href="/assets/js/8.38adfb93.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.271cdf46.js">
    <link rel="stylesheet" href="/assets/css/0.styles.6cca0d72.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">Vue Styleguidist</span></a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/GettingStarted.html" class="nav-link">
  Docs
</a></div><div class="nav-item"><a href="/Examples.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  Examples
</a></div><div class="nav-item"><a href="/VueCLI3doc.html" class="nav-link">
  Vue CLI Plugin
</a></div><div class="nav-item"><a href="/Configuration.html" class="nav-link">
  Reference
</a></div> <a href="https://github.com/vue-styleguidist/vue-styleguidist" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/docs/GettingStarted.html" class="nav-link">
  Docs
</a></div><div class="nav-item"><a href="/Examples.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  Examples
</a></div><div class="nav-item"><a href="/VueCLI3doc.html" class="nav-link">
  Vue CLI Plugin
</a></div><div class="nav-item"><a href="/Configuration.html" class="nav-link">
  Reference
</a></div> <a href="https://github.com/vue-styleguidist/vue-styleguidist" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><a href="/Examples.html" aria-current="page" class="active sidebar-link">Examples</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/Examples.html#basic" class="sidebar-link">basic</a></li><li class="sidebar-sub-header"><a href="/Examples.html#customised" class="sidebar-link">customised</a></li><li class="sidebar-sub-header"><a href="/Examples.html#dashed-component" class="sidebar-link">dashed-component</a></li><li class="sidebar-sub-header"><a href="/Examples.html#docgen" class="sidebar-link">docgen</a></li><li class="sidebar-sub-header"><a href="/Examples.html#docgen-vite" class="sidebar-link">docgen-vite</a></li><li class="sidebar-sub-header"><a href="/Examples.html#functional-flag" class="sidebar-link">functional-flag</a></li><li class="sidebar-sub-header"><a href="/Examples.html#jsx" class="sidebar-link">jsx</a></li><li class="sidebar-sub-header"><a href="/Examples.html#jsx-examples" class="sidebar-link">jsx-examples</a></li><li class="sidebar-sub-header"><a href="/Examples.html#nuxtjs" class="sidebar-link">nuxtjs</a></li><li class="sidebar-sub-header"><a href="/Examples.html#router" class="sidebar-link">router</a></li><li class="sidebar-sub-header"><a href="/Examples.html#sections" class="sidebar-link">sections</a></li><li class="sidebar-sub-header"><a href="/Examples.html#svg-loader" class="sidebar-link">svg-loader</a></li><li class="sidebar-sub-header"><a href="/Examples.html#vuecli-noplugin" class="sidebar-link">vuecli-noplugin</a></li><li class="sidebar-sub-header"><a href="/Examples.html#vuecli3" class="sidebar-link">vuecli3</a></li><li class="sidebar-sub-header"><a href="/Examples.html#vuecli3-class-pug-ts" class="sidebar-link">vuecli3-class-pug-ts</a></li><li class="sidebar-sub-header"><a href="/Examples.html#vuecli3-custom" class="sidebar-link">vuecli3-custom</a></li><li class="sidebar-sub-header"><a href="/Examples.html#vuecli3-vuetify-ie" class="sidebar-link">vuecli3-vuetify-ie</a></li><li class="sidebar-sub-header"><a href="/Examples.html#vueds" class="sidebar-link">vueds</a></li><li class="sidebar-sub-header"><a href="/Examples.html#vuetify" class="sidebar-link">vuetify</a></li><li class="sidebar-sub-header"><a href="/Examples.html#vuex" class="sidebar-link">vuex</a></li><li class="sidebar-sub-header"><a href="/Examples.html#with-laravel-token" class="sidebar-link">with-laravel-token</a></li><li class="sidebar-sub-header"><a href="/Examples.html#with-sass-loader" class="sidebar-link">with-sass-loader</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="examples"><a href="#examples" class="header-anchor">#</a> Examples</h1> <p>In the <a href="https://github.com/vue-styleguidist/vue-styleguidist/" target="_blank" rel="noopener noreferrer">repository<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>,
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.</p> <h2 id="basic"><a href="#basic" class="header-anchor">#</a> basic</h2> <p>Example of vue-styleguidist tested on IE11, please have a look at the webpack config of babel</p> <ul><li><a href="https://vue-styleguidist.github.io/basic/">Live Demo</a></li> <li><a href="https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/examples/basic/" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <p>Keywords: internet explorer, compatible, IE11,</p> <h2 id="customised"><a href="#customised" class="header-anchor">#</a> customised</h2> <p>The general interface of the output styleguide can be completely changed. Style and assets.</p> <ul><li><a href="https://vue-styleguidist.github.io/customised/">Live Demo</a></li> <li><a href="https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/examples/customised/" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <p>Keywords: styled, feature rich, branding, beautiful,</p> <h2 id="dashed-component"><a href="#dashed-component" class="header-anchor">#</a> dashed-component</h2> <p>Here we experiment how to mock the router in your showcases</p> <ul><li><a href="https://vue-styleguidist.github.io/dashed-component/">Live Demo</a></li> <li><a href="https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/examples/dashed-component/" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <p>Keywords: routing, window, global, mock, vue-router, router-link,</p> <h2 id="docgen"><a href="#docgen" class="header-anchor">#</a> docgen</h2> <p>Use vue-docgen-cli to integrate with vuepress sites</p> <ul><li><a href="https://vue-styleguidist.github.io/docgen/">Live Demo</a></li> <li><a href="https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/examples/docgen/" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <p>Keywords: vuepress, docgen, cli, vue-live, markdown,</p> <h2 id="docgen-vite"><a href="#docgen-vite" class="header-anchor">#</a> docgen-vite</h2> <ul><li><a href="https://vue-styleguidist.github.io/docgen-vite/">Live Demo</a></li> <li><a href="https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/examples/docgen-vite/" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="functional-flag"><a href="#functional-flag" class="header-anchor">#</a> functional-flag</h2> <p>Example of vue-styleguidist with functional tag</p> <ul><li><a href="https://vue-styleguidist.github.io/functional-flag/">Live Demo</a></li> <li><a href="https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/examples/functional-flag/" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <p>Keywords: functional, customized,</p> <h2 id="jsx"><a href="#jsx" class="header-anchor">#</a> jsx</h2> <p>Even components using JSX templates are documented</p> <ul><li><a href="https://vue-styleguidist.github.io/jsx/">Live Demo</a></li> <li><a href="https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/examples/jsx/" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="jsx-examples"><a href="#jsx-examples" class="header-anchor">#</a> jsx-examples</h2> <p>Examples can contain jsx too</p> <ul><li><a href="https://vue-styleguidist.github.io/jsx-examples/">Live Demo</a></li> <li><a href="https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/examples/jsx-examples/" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <p>Keywords: jsx, sucrase, compiler, vue examples, functional,</p> <h2 id="nuxtjs"><a href="#nuxtjs" class="header-anchor">#</a> nuxtjs</h2> <p>Use beside Nuxt.js and generate your styleguide besides your main app</p> <ul><li><a href="https://vue-styleguidist.github.io/nuxtjs/">Live Demo</a></li> <li><a href="https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/examples/nuxtjs/" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <p>Keywords: nuxt, nuxtjs, production ready, scaffolding,</p> <h2 id="router"><a href="#router" class="header-anchor">#</a> router</h2> <p>Here we experiment how to mock the router in your showcases</p> <ul><li><a href="https://vue-styleguidist.github.io/router/">Live Demo</a></li> <li><a href="https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/examples/router/" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <p>Keywords: routing, window, global, mock, vue-router, router-link,</p> <h2 id="sections"><a href="#sections" class="header-anchor">#</a> sections</h2> <p>To group components, sections are useful. Look at the left menu of this example</p> <ul><li><a href="https://vue-styleguidist.github.io/sections/">Live Demo</a></li> <li><a href="https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/examples/sections/" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="svg-loader"><a href="#svg-loader" class="header-anchor">#</a> svg-loader</h2> <p>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.</p> <ul><li><a href="https://vue-styleguidist.github.io/svg-loader/">Live Demo</a></li> <li><a href="https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/examples/svg-loader/" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="vuecli-noplugin"><a href="#vuecli-noplugin" class="header-anchor">#</a> vuecli-noplugin</h2> <p>What happens if you try to use the Vue CLI 3, install styleguidist, and omit to use the plugin</p> <ul><li><a href="https://vue-styleguidist.github.io/vuecli-noplugin/">Live Demo</a></li> <li><a href="https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/examples/vuecli-noplugin/" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="vuecli3"><a href="#vuecli3" class="header-anchor">#</a> vuecli3</h2> <p>When using vue cli 3, prefer using the plugin using <code>vue add styleguidist</code></p> <ul><li><a href="https://vue-styleguidist.github.io/vuecli3/">Live Demo</a></li> <li><a href="https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/examples/vuecli3/" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="vuecli3-class-pug-ts"><a href="#vuecli3-class-pug-ts" class="header-anchor">#</a> vuecli3-class-pug-ts</h2> <p>Here we showcase the wide variety of technologies vue-styleguidist supports</p> <ul><li><a href="https://vue-styleguidist.github.io/vuecli3-class-pug-ts/">Live Demo</a></li> <li><a href="https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/examples/vuecli3-class-pug-ts/" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <p>Keywords: technologies, typescript, sass, class-component,</p> <h2 id="vuecli3-custom"><a href="#vuecli3-custom" class="header-anchor">#</a> vuecli3-custom</h2> <p>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</p> <ul><li><a href="https://vue-styleguidist.github.io/vuecli3-custom/">Live Demo</a></li> <li><a href="https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/examples/vuecli3-custom/" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <p>Keywords: styled, feature rich, branding, beautiful, vuecli3, plugin,</p> <h2 id="vuecli3-vuetify-ie"><a href="#vuecli3-vuetify-ie" class="header-anchor">#</a> vuecli3-vuetify-ie</h2> <p>Use vuetify, with internationalization within the vue cli. Make sure you have a look at the vue.config.js transpiledDependencies</p> <ul><li><a href="https://vue-styleguidist.github.io/vuecli3-vuetify-ie/">Live Demo</a></li> <li><a href="https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/examples/vuecli3-vuetify-ie/" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <p>Keywords: internet explorer, compatible, IE11, vuetify, i18n,</p> <h2 id="vueds"><a href="#vueds" class="header-anchor">#</a> vueds</h2> <p>Example of vue-styleguidist tested on IE11, please have a look at the webpack config of babel</p> <ul><li><a href="https://vue-styleguidist.github.io/vueds/">Live Demo</a></li> <li><a href="https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/examples/vueds/" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <p>Keywords: internet explorer, compatible, IE11,</p> <h2 id="vuetify"><a href="#vuetify" class="header-anchor">#</a> vuetify</h2> <p>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.</p> <ul><li><a href="https://vue-styleguidist.github.io/vuetify/">Live Demo</a></li> <li><a href="https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/examples/vuetify/" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="vuex"><a href="#vuex" class="header-anchor">#</a> vuex</h2> <p>To use <code>vuex</code> or <code>vue-router</code> you might need some trickery. Have a look at the <code>config/styleguide.root.js</code> file to get ideas on what to try.</p> <ul><li><a href="https://vue-styleguidist.github.io/vuex/">Live Demo</a></li> <li><a href="https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/examples/vuex/" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="with-laravel-token"><a href="#with-laravel-token" class="header-anchor">#</a> with-laravel-token</h2> <p>This example is a way to demontrate how to initialize global/window context usable by every component</p> <ul><li><a href="https://vue-styleguidist.github.io/with-laravel-token/">Live Demo</a></li> <li><a href="https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/examples/with-laravel-token/" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <p>Keywords: laravel, token, CSRF, window, global,</p> <h2 id="with-sass-loader"><a href="#with-sass-loader" class="header-anchor">#</a> with-sass-loader</h2> <p>In this example, we try loading colors in each vue sfc. Just a head's up, it does not work anymore...</p> <ul><li><a href="https://vue-styleguidist.github.io/with-sass-loader/">Live Demo</a></li> <li><a href="https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/examples/with-sass-loader/" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/vue-styleguidist/vue-styleguidist/edit/dev/docs/Examples.md" target="_blank" rel="noopener noreferrer">Edit this page</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.3c212ffd.js" defer></script><script src="/assets/js/3.4a2a9d93.js" defer></script><script src="/assets/js/9.0bad6c21.js" defer></script>
  </body>
</html>