Qikker UI

A collection of basic vue components for use with the qikker frontend boilerplate.

Getting Started

Install qikker-ui via npm or yarn.

# Via NPM.
$ npm install @qikkeronline/qikker-ui

# Via Yarn.
$ yarn add @qikkeronline/qikker-ui

By design, Qikker UI doesn't ship with pre-built files, so you must compile the code in your project. Please follow the following instruction to set up your build system.

Qikker UI comes with a config file qikker-ui.scss, this file is created post install at the root of your project. You can change global variables here.

To compile Vue Components, you must have appropriate build settings. For example, in Nuxt.js, you should define the following setting at nuxt.config.js, this allows using named exports for the components. (In vue projects this does not seem to be needed. TODO examine this)

export default {
  // ...

  build: {
    transpile: ['@qikkeronline/qikker-ui'],
  },

  // ...
}

To begin using the components, import them from the qikker-ui package.

<template>
  <div>
    <QInput label="Label" placeholder="Placeholder" />
  </div>
</template>

<script>
import { QInput } from '@qikkeronline/qikker-ui'

export default {
  components: {
    QInput
  }
}
</script>

You can also import them as global components.

Example usage with NuxtJS plugin

// qikker-ui.js
import Vue from 'vue'
import { QIcon, QSvg, QInput, QCheckbox, QRadio, QToggle } from '@qikkeronline/qikker-ui'

Vue.component('q-icon', QIcon) // * see notes below for alternative registration
Vue.component('q-svg', QSvg)
Vue.component('q-input', QInput)
Vue.component('q-checkbox', QCheckbox)
Vue.component('q-radio', QRadio)
Vue.component('q-toggle', QToggle)

Important Notes

It is suggested that you import at least these components as global: Qicon, Qsvg. For the rest it depends on your project.

QIcon is set to stroke: currentColor by default. If you want to globally set it to fill: currentColor you can do so by registering it like this instead in the qikker-ui.js:

Vue.use(QIcon, { isFill: true })

Build Setup

# install dependencies
$ npm install

# serve with hot reload at localhost:8080
$ npm run serve

# build for production
$ npm run build


For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org).