Vue.js UI Toolkit for Rapid Project Development of StayWoke Projects.

This project is the home for all StayWoke Vue.js 2 Components in our UI Toolkit. It is not set up to be a complete Web Application, but rather a collection of parts you can use to speed up development of your own.

We felt it would help to see how you would implement our UI Toolkit in the "Real World" so we made a Sample Project that uses our UI ToolKit to get you started within minutes on making a full-blown Vue.js 2 Web Application.

UI Toolkit uses Atomic Design Principles. Each component has example documentation for implementing in your Vue.js 2 Project.

Duplicate .env.example as a new file named .env.

cp .env.example .env

Then edit .env with your private information. The values within .env can be used anywhere in your code by prefixing the value with process.env..

e.g. API_KEY=my_api_key inside .env would be referenced in code as process.env.API_KEY

IMPORTANT: Changes to this file will required restarting storybook

Install NVM

Install NVM to make working with the right version of Node automatic.

Check that the following code was added to your profile (~/.bash_profile, ~/.zshrc, ~/.profile, or ~/.bashrc).

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This automagically loads nvm

Setup NVM for this project

nvm install v8.9.4

Now you can continue with installation.

Developers of UI Toolkit really only need the following development scripts.

# install dependencies
npm install

# serve interactive components with hot reload at localhost:9001
npm run storybook

# run all tests
npm test

# run single unit test by name
npm run -s unit:single -- -t 'Component › Atom › Checkbox'

1. Install the Vue.js devtools Chrome Extension
2. Open Google Developer Tools
3. Select the Vue tab & to debug state data, click the Vuex tab