vuikit 0,2 editorconfig npm

UIkit with all the power of Vue

3 years after

UIkit with all the power of Vue

Vuikit is a collection of Vue components built on top of the awesome UIkit framework. While it is possible to use UIkit by its own when building Vue components, you may find yourself building a wrapper around it to fill the missing logic gap or to make it behave more naturally with Vue. Vuikit solves all that by providing Vue native components outputting UIkit layout.

Documentation and examples

There is a live demo at http://vuikit.github.io/vuikit with technical information about each component. As well as a codepen playground.

Dependencies

  • Vue (^2.0.0)
  • Moment (^2.14.1) - Only required by VkCalendar

Code Samples

Note that all code examples are using ES6 syntax

Vuikit components are registered globally by default and ready to be used immediately.

import Vue from 'vue'
import Vuikit from 'vuikit'

Vue.use(Vuikit)
<template>
  <div>
    <vk-button-checkbox>
      <vk-button color="primary">Button</vk-button>
      <vk-button active>Button</vk-button>
      <vk-button>Button</vk-button>
    </vk-button-checkbox>
  </div>
</template>

Although is possible to load and register them individually.

import Vue from 'vue'
import { Button, Modal } from 'vuikit'

// globally
Vue.component('VkButton', Button)
Vue.component('VkModal', Modal)

// or locally
new Vue({
  components: {
    VkButton: Button,
    VkModal: Modal
  }
})

Changing the output or adding specific features is straightforward by extending a component.

import Vue from 'vue'
import { Button } from 'vuikit'

Vue.component('TmButton', {
  extends: Button,
  template: '', // the new output
  props: {} // new features
  ...
})

Configuration and Usage

NPM

npm install vuikit --save
import Vue from 'vue'
import Vuikit from 'vuikit'

Vue.use(Vuikit) // or register individually

Browser

Make sure Vue is loaded upfront and then load dist/vuikit.js.

Developers

# install dependencies
npm install

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

# build for distribution
npm run build

Custom UIkit Themes

UIkit custom themes will work fine by default with most of Vuikit components. There are few execptions, though, explained below.

Modal

UIkit Modal transitions are hardcoded plus incompatible with Vue transitions. The solution is to reset those and apply new ones.

.hook-modal() {
  // as UIkit hardcore transitions
  // styles, a reset is necessary
  opacity: inherit;
  display: inherit;
  opacity: inherit;
  -webkit-transform: inherit;
  transform: inherit;

  // add custom transitions
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
}

.hook-modal-dialog() {
  // reset transitions styles
  opacity: inherit;
  -webkit-transform: inherit;
  transform: inherit;

  // add custom transitions
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

// add custom transitions
.hook-modal-misc() {
  .vk-modal-transition-enter .uk-modal-dialog {
    opacity: 0;
  }
  .vk-modal-transition-leave-active .uk-modal-dialog {
    opacity: 0;
  }
  .vk-modal-transition-enter .uk-modal-dialog,
  .vk-modal-transition-leave-active .uk-modal-dialog {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

Dropdown

Similar as with Modal, transition styles must be reseted.

// reset hardcoded transition styles
.hook-dropdown-misc() {
  .uk-dropdown,
  .uk-dropdown-blank {
    display: inherit;
  }
}

Table

The table component is not part of the UIkit library, as such relies on Vuikit specific styling.

License

Vuikit is open source and released under the MIT License.

Copyright (c) 2016 ZOOlanders.com

Related Repositories

vue-ui-framework

vue-ui-framework

My personal collection of Vue UI framework ...

awesome-uikit

awesome-uikit

A curated list of awesome things related to UIkit ...

awesome-vue

awesome-vue

A curated list of awesome things related to Vue.js ...

awesome-vue

awesome-vue

A curated list of awesome things related to Vue.js ...

awesome-vue

awesome-vue

A curated list of awesome things related to Vue.js ...


Top Contributors

miljan-aleksic ameli90 mul14 vuchl

Dependencies

package version
moment ^2.14.1
vue ^2.0.0
dev babel-core ^6.10.4
babel-helper-vue-jsx-merge-props ^2.0.1
babel-loader ^6.2.4
babel-plugin-lodash ^3.1.4
babel-plugin-syntax-jsx ^6.8.0
babel-plugin-transform-runtime ^6.0.0
babel-plugin-transform-vue-jsx ^3.1.0
babel-preset-es2015 ^6.0.0
babel-preset-stage-2 ^6.0.0
chromedriver ^2.21.2
connect-history-api-fallback ^1.3.0
css-loader ^0.26.1
eslint ^3.6.1
eslint-config-standard ^6.1.0
eslint-friendly-formatter ^2.0.5
eslint-loader ^1.5.0
eslint-plugin-html ^1.3.0
eslint-plugin-promise ^3.4.0
eslint-plugin-standard ^2.0.1
eventsource-polyfill ^0.9.6
express ^4.13.3
extract-text-webpack-plugin ^1.0.1
file-loader ^0.9.0
function-bind ^1.0.2
html-webpack-plugin ^2.8.1
inject-loader ^2.0.1
jasmine ^2.4.1
jasmine-core ^2.4.1
js-beautify ^1.6.3
json-loader ^0.5.4
karma ^1.3.0
karma-coverage ^1.0.0
karma-jasmine ^1.1.0
karma-mocha-reporter ^2.0.4
karma-phantomjs-launcher ^1.0.2
karma-sauce-launcher ^1.0.0
karma-sourcemap-loader ^0.3.0
karma-spec-reporter ^0.0.26
karma-webpack ^1.7.0
lodash ^4.12.0
lodash-webpack-plugin ^0.10.6
ora ^0.3.0
phantomjs-prebuilt ^2.1.1
shelljs ^0.7.4
tether ^1.3.3
url-loader ^0.5.7
vue-hot-reload-api ^2.0.5
vue-html-loader ^1.0.0
vue-loader ^10.0.2
vue-router ^2.0.0
vue-style-loader ^1.0.0
vue-template-compiler ^2.1.6
vuikit-docs ^0.1.1
webpack ^1.13.2
webpack-dev-middleware ^1.8.3
webpack-hot-middleware ^2.12.2
webpack-merge ^1.1.1

Releases

-   0.6.0 zip tar
-   0.5.0 zip tar
-   0.4.1 zip tar
-   0.4.0 zip tar
-   0.3.0 zip tar