Mekari UI Vue

General web components in Mekari. The components are made using vue.js as its framework. Styling of components on Mekari UI Vue uses Mekari UI Toolkit. Don't forget to import the styling from Mekari UI Toolkit on your application first before using components from Mekari UI Vue.

Prerequisite

• Node (Recommended to use >= v10.0.0)
• Yarn (Recommended to use >= v1.22.0)

Setup

Before running the setup, make sure to fulfill the prerequisite above. After that, the repo needed to be cloned, and then run the initial setup script. Here is the snippet:

git clone [email protected]:mid-kelola-indonesia/mekari-ui-vue.git
cd mekari-ui-vue
yarn

Storybook

Mekari UI Vue uses Storybook to see a preview of the components and its documentation. The preview of component can be updated dynamically using option provided from control panel.

Run Storybook

The storybook needed to be run first in order to be able to see the preview the components on Mekari UI Vue. By default, the storybook will be run on http://localhost:6006. Here is the snippet to run storybook on Mekari UI Vue:

yarn storybook

Build Storybook

In some case, you need the static version of storybook so you can embed it on some other pages. This can be done using build-storybook command from storybook. The built code by default will be located in /build directory. Here is the snippet to build storybook:

yarn build-storybook

Development

Sometimes, the Mekari UI Vue and Mekari UI Toolkit developed at same time. Because of that, sometimes the package version of Mekari UI Toolkit used in Mekari UI Vue on storybook from npmjs will not be the same with the current Mekari UI Toolkit that is still in development. To handle this, you can use the source of Mekari UI Toolkit to use from local machine like this:

//package.json

.
.
.
"dependencies": {
  "mekari-ui-toolkit": "file:/location/to/mekari-ui-toolkit",
  .
  .
  .
},
.
.
.

After that, make sure mekari-ui-toolkit on node_modules is using the right version. You can check it on yarn.lock. It will look like this:

//yarn.lock

.
.
.
mekari-ui-toolkit:
  version "1.0.11" -> this version is based on version in package.json
  resolved "/location/to/mekari-ui-toolkit"
.
.
.

Or if you really want to make sure 100% your mekari-ui-tollkit is using version from your local machine, you can run these commands on your root mekari-ui-vue directory:

rm -rf ./node_modules/@mekari/mekari-ui-toolkit
rm yarn.lock
yarn

Further Reading

You can read more documentation on many how to in Mekari UI Vue here.

If you want to contribute to Mekari UI, you can read this guide.