Using the Styleguide with React or Vue
The styleguide can be used in modern JavaScript frameworks like React, Vue, and Angular. This documentation will cover how to integrate the it into Nuxt and Gatsby, however using it with other frameworks should have a similar approach.
Before you begin, add the fontawesome npm package . You will need to include the 'faBars' and 'faHome' icons. Also, you will need to downoad some CSS files. Place them where ever static files are served or with your other css.
Nuxt
Nuxt is a static site generator for Vue. To add the styleguide, you should edit the default.vue template or create a new one.
Additionally, you will have to add the CSS files and CDN links in the nuxt.config.js file.
A few things have changed in the markup. First, Nuxt uses the 'nuxt-link' tag for relative paths. This means
that the main menu will most likely have to be changed to use them. Also, the branding is able to have
a few color choices. In order to cahnge them, you will need to add all the correct classes to the tags. If you just want
a complete template, you can copy and paste the markup below into your default.vue file.
Gatsby
Gastby is a static site generator for React. Gatsby uses the 'Link' tag for relative links. You may have to change some of the links in the main menu to the 'Link'
tag instead of the regular anchor tags. Gatsby also uses Layout components that wrap the page content. To add the CDNs
properly, you have to copy the html.js component. Copy cp .cache/default-html.js src/html.js into your terminal from the project root. Then
add the CDN links under the {props.headComponents} line. This will add the CDNs as a static asset to all of the pages.
Extra
Moving forward, it would be nice to make an NPM package so that these components could be used easier.