vuikit / vuikit

A responsive Vue UI library for web site interfaces

Vuikit

A responsive Vue 2 UI library for web site interfaces based on the UIkit 3 framework.

If you are enjoying Vuikit and want to support the project consider making a small donation. It means a lot :)

Getting Started

<script>
import Vue from 'vue'
import Vuikit from 'vuikit'
import VuikitIcons from '@vuikit/icons'

Vue.use(Vuikit)
Vue.use(VuikitIcons)
</script>

<template>
  <vk-button>MyButton</vk-button>
  <vk-icon icon="heart"></vk-icon>
</template>

Packages

vuikit repository is a monorepo managed by Yarn Workspaces. Click on package name to see specific docs.

Package	Version	Description
vuikit		The main package
vuikit-icons		Icons collection
vuikit-theme		Default theme

Semver

Until a v1.0.0 is reached, breaking changes will be released with a new minor version. For example 0.4.0 and 0.4.1 would have the same API and it's safe to update, but 0.5.0 would have breaking changes and the integration may require a review.

Acknowledgments

A special thanks to:

• ZOOlanders for sponsoring Vuikit.
• YOOtheme for creating and open sourcing UIkit.

License

MIT © Miljan Aleksic

vuikit's Issues

trackBy in table render

I was using the code for building a table for your example and it kept throwing the console error Missing required prop: "trackBy". I changed the prop to track-by and it started working. Just thought I'd let you know since the docs don't seem to reflect this change.

Bower?

Any chance of making Vuikit available on bower?

Vuikit Next modal body

vuikit/src/components/modal/modal.vue

Line 45 in 38db950

<slot />

With the main slot already in the uk-modal-body
you can't easily put something in de dialog itself.
We I was kinda using this in some of my designs.
Perhaps some properties with body-class or something?

Scrollable or swipable tabs heads

Hi,
I was trying the tabs. When you have a lot of tabs that does not fit into the page they wrap down to the next like. Instead of this can the tab heads be made scrollable like the tabs of a browser or swipable on mobile.

Thx.

target by id

Hello,
You should avoid to target with the html ids.
It s not a good vuejs aproche.
Prefer refs.

Robust table field options

I am enjoying the simplicity so far, but I am struggling to find the answer to my question in the docs or the code itself. For a couple of fields I would like to display something like tags. The column being Tags and the contents of each field would be multiple tags. Is there a callback or format option for how the field can get displayed?

vk-modal modal not showing

I am using the code from the official documentation - https://vuikit.github.io/vuikit/#/modal

<vk-button @click.native="show = true">
  Open
</vk-button>
<vk-modal :show="show"
  @clickOut="show = false"
  @inactive="show = false"
  @keyEsc="show = false">
  <a class="uk-close"
    @click="show = false">
  </a>
  <div class="uk-modal-header">
    <h2>Headline</h2>
  </div>
  <p>Lorem ipsum...</p>
  <div class="uk-modal-footer">
    Footer
  </div>
  <div class="uk-modal-caption">Caption</div>
</vk-modal>

The modal - it's just not showing. However the html is transformed correctly.

Here's a codepen with vk-modal (not working) along with some other elements from the vuikit that work just fine: http://codepen.io/shershen08/pen/oYWvwo?editors=1010

vue.js - 2.0.3
moment.js - 2.15.1
uikit.css - 2.27.1

[next] Button doesn't emit clicks

Hi!

I'm trying to experiment with the next branch, and I'm a bit confused about behaviour of the Button component. It doesn't produce clicks. I subscribe to the @click="" event, but when I press the button nothing happens. The template looks simple except this {...data} part. Perhaps it has something to do with my problem? Never seen it before in Vue tempates.

<button type={ this.type } disabled={ this.disabled } {...data}>
    { this.$slots.default }
</button>

Style doesn't apply on table component

I have imported library in my webpack project with following line:
import Vuikit from 'vuikit'

and this is where I've included a table in my template:

<vk-table v-show="tableRows.length"
              selectable
              condensed
              hover
              trackBy="id"
              :fields="table.fields"
              :rows="tableRows">
    </vk-table>

It is working fine and viewing data properly, but it has no style applied. I mean it doesn't have the theme which is in your Demo.

How about a time picker widget?

Hi, thoroughly impressed with the responsiveness of these widgets, though you are missing a timepicker which is preventing me from using this lib in my hobby project.

Any plans for implementing this?

Off-canvas example does not seem to work

1. Go to the codepin playground for vuikit.

2. Paste in the example for off-canvas:

<vk-button @click.native="show = true">
  Show
</vk-button>
<vk-offcanvas :show="show"
  @clickOut="show = false">
  Content
</vk-offcanvas>

As you can tell, it doesn't seem to work.

Similarly, I'm seeing that it's not working inside my app. The classes are changing, but it isn't showing the off-canvas. Very strange.

UIkit 3?

What will happen with/to vuikit and what will developers notice or have to do when UIkit is moving to their version 3?

No css styles for components.

// main.js

import Vue from 'vue'
import store from './vuex/store'
import App from './components/App.vue'
import Vuikit from 'vuikit'

Vue.use(Vuikit)

new Vue({
  store, // inject store to all children
  el: 'body',
  components: { App }
})

// Editor.vue
<template>
    ...
    <vk-button color="primary">Button</vk-button>
    <vk-button active>Button</vk-button>
    <vk-button>Button</vk-button>
    ...
</template>

<script>
import { editNote } from '../vuex/actions'

export default {
  vuex: {
    getters: {
      activeNoteText: state => state.activeNote.text
    },
    actions: {
      editNote
    }
  }
}
</script>

The output has no styles, but with the uk-button class.

@vuikit/vuikit removed from NPM

Hello just realized the @vuikit/vuikit package was removed from npm.
What is reason and how to work around this?

Vuikit and styling

Greetings!

I like what I'm seeing with Vuikit, I just can't seem to find the styling. From other issues I've seen that I should import .less/scss files, but those do not come with the package, which leaves me wondering about what's going on.

So what is the preferred way of going about this? Thanks in advance :-)

doc typo on progress

Hello : progress contains pagination component here : http://vuikit.github.io/vuikit/#!/progress

The vk-progress component renders a progress bar.
PROPS
SLOTS
EXAMPLE
<vk-pagination :progress="100"
color="warning"
stripe>
40%

Including UIKit

Hey, just wondering what the best way is to include uikit itself to a webpack project.

Using a fresh webpack project generated with vue-cli webpack and I can confirm that vuikit works but uikit CSS/JS is not working.

I added uikit with yarn install uikit but I'm not sure how to make webpack load the correct files. Simple require('uikit') didn't work for me.

_uikit2.default.modal is not a function

Trying out vuikit for the first time, but with a very setup in my project I get the following error:
_uikit2.default.modal is not a function

in

      methods: {
        initModal: function initModal() {
          var vm = this;
          this.UImodal = _uikit2.default.modal(this.$els.modal, this.options);
          this.UImodal.on('show.uk.modal', function () {
            vm.show = true;
            vm.$emit('show');
            setTimeout(function () {
              vm.UImodal.resize();
            }, 1);
          });
          this.UImodal.on('hide.uk.modal', function () {
            vm.show = false;
            vm.$emit('hide');
          });
        }
      }

I setup Vue.use(VuiKit) in my main script, and am using the following template in a component. On rendering, it throws the above error.

  <div>
    <vk-modal overflow>
      <template slot="header">Headline</template>
      <div>Test</div>
      <template slot="footer">Footer</template>
      <template slot="caption">Caption</template>
    </vk-modal>
  </div>
</template>

Any idea what could be causing this? On debugging, _uikit2.default exists, but there's no 'modal' anywhere inside of it when I browse through all the properties.

Using Vue 1.0.26 w/ ES6 & Webpack

Datepicker dropdown position

Hi!

It seems that there's no way to change Datepicker's dropdown position. The prop in there always falls back to default "bottom left". Does anyone know a way to deal with this problem?

Thanks!

Autocomplete

There doesn't seem to be a vuikit component for autocomplete. Is that in the works?

What version of UIKit is supported?

UIKit Lightbox close button not working properly in presence of VUIkit CSS

It looks like the VUIkit CSS for the modal transitions is breaking the regular UIKit Lightbox because it uses a normal modal under the covers.

With the changes by VUIKit to the transition CSS for modals, a CSS transition event that is assumed to happen on a normal modal is not firing. As a result, the close button doesn't work properly because it's trying to hook onto this transition event that is not firing (but does fire later after some other transition occurs).

To recreate:

• Set up VUIkit.
• Set up a Lightbox per UIkit documentation with a group (two images).
• Trigger the lightbox.
• Click the close button - nothing happens.
• Navigate to the second image.
• After the second image loads/animates in, the lightbox closes.

Would it be possible to get some native support for Lightboxes in VUIkit? Or barring that, could we get some CSS for the modal transitions that doesn't interfere with the operation of the stock Lightbox component from UIkit?

Tabs example doesn't want to work

I'm probably doing this wrong, but I honestly don't know what's going on.

My page:

<html>
<head>
    <title>Login</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/uikit.gradient.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.8/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vuikit/0.6.2/vuikit.js"></script>
</head>
<body>
<div id="login">
    <vk-tabs :index="index"
             @change="index = arguments[0]">
        <vk-tabs-item name="Login">
            <div>
                <form method="post" action="/login">
                    <section><input placeholder="Username" name="username"></section>
                    <section><input placeholder="Password" name="password" type="password"></section>
                    <section><input type="submit" value="Login"></section>
                </form>
            </div>
        </vk-tabs-item>
        <vk-tabs-item name="Register">
            <div>
                <form method="post" action="/register" style="margin-top: 10px">
                    <section><input placeholder="Username" name="username"></section>
                    <section><input placeholder="Password" name="password" type="password"></section>
                    <section>
                        <label>
                            <input type='radio' name="type" value="0" checked>
                            <span class="checkable">Student</span>
                        </label>
                        <label>
                            <input type='radio' name="type" value="1">
                            <span class="checkable">Teacher</span>
                        </label>
                    </section>
                    <section><input type="submit" value="Register"></section>
                </form>
            </div>
        </vk-tabs-item>
    </vk-tabs>
</div>
<script type='text/javascript'>
    new Vue({
        el: '#login'
    })
</script>
</body>
</html>

The tabs render but the second one is not clickable.

What I get in the console:

[Vue warn]: Property or method "index" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 

Scrollspy and ScrollspyNav component

Hi @miljan-aleksic! Thank you for your awesome work with vuikit!

Recently you have added Scroll component. It would be great to have Scrollspy component too. Do you plan to implement it?

Getting vuikit to work without webpack and ES6

Hi there!

I'm having troubles getting vuikit to work when I'm only in the browser and serving via Apache. I have this index.html:

<!DOCTYPE html>
<html>
    <head>
        <title>Laravel</title>

        <script src="/js/jquery.js"></script>
        <script src="/js/uikit.js"></script>
        <script src="/js/vue.js"></script>
        <script src="/js/vuikit.js"></script>
        <link href="/css/uikit.css" rel="stylesheet">

    </head>
    <body>
        <app></app>
        <script>

            new Vue({
                el: 'app',
                template: '@{{ number }}',
                data: function() {
                    return ({number: 1})
                },
            })

        </script>
    </body>
</html>

jQuery is 2.2.4, Vuejs is 1.0.26 and Uikit is 2.26.4. I git cloned the repo and after npm install i ran npm run buildand used the created dist/vuikit.js in my project.

I still get the message that "ReferenceError: vue is not defined...,t.webpackPolyfill=1),t}},function(t,e){t.exports=vue},function(t,e,n){"use stri...vuikit.js (Row 7, Column 27256)".

I'm not the greatest NPM/Node master but from going through the files i can see that it builds against production as the environment.

What am I missing? Normal Vue.js usage is possible.

Edit: Don't mind the @ infront of the mustache syntax, I use laravel and escape the mustaches that way to keep them in the file.

How to install and use

Hey guys. Sorry if my question seems too stupid. Honestly, I am new to Vue.js and I know my question may not be releveant to this project. I followed official Vue.js tutorial and had learned basic stuff. After looking for good UI kits which are based on Vue.js, I have come to decision to use your project. I followed your documentation, installed via npm and included in main.js. But, I never can get components rendered correctly. For example, if I use <vk-button> in my template, it is being rendered as standard button.

Can you guys provide me very simple boilerplate based on vue-cli which can be generated with$ vue init webpack mysample?

Edit: grammar

Codepen Playground

The codepen playground doesn't seem to work, so I set up a JSFiddle to play around with vuikit:

https://jsfiddle.net/fabiandev/cuz6qs43/

Feel free to fork, and thanks for this great package :)

Production Stable release schedule?

Hi,

Any estimate when the UIKit 3 compatible version will be considered production-stable?

Thanks and regards
Ayush

Dropdown works only with vuikit.css

Hi,

please mention that some components need extra styling. For example the Dropdown displays only with vuikit.css. The styles provided by uikit aren't enough.

Regards,
Danny

IE - Calendar Selector not working

IE - Calendar Selector not working

Hi, Report a bug
Changing the year / date in calendar causes an error in IE
This is due to event.target.selectedOptions IE Bug
event.target.selectedOptions IE Bug
please, Modify to use event.target.value instead of event.target.selectedOptions

I tested it using event.target.value and it worked fine.

export 'default' (imported as 'Vuikit') was not found in 'vuikit'

This issue occurs on the next branch implementing UiKit 3.

Overview

To replicate:

1. Start an empty Vue project using vue init webpack project
2. Install Vuikit via yarn add https://github.com/vuikit/vuikit#next
3. In main.js, add

import Vuikit from 'vuikit'
Vue.use(Vuikit)

4. Start dev server with npm run dev.

Expected behavior

The Vue project should load without errors.

Actual behavior

The dev server gives this warning:

warning  in ./src/main.js

7:8-14 "export 'default' (imported as 'Vuikit') was not found in 'vuikit'

And the browser's js console displays the error:

Uncaught TypeError: Cannot read property 'installed' of undefined
    at Function.Vue.use (eval at <anonymous> (app.js:723), <anonymous>:3443:15)
    at eval (eval at <anonymous> (app.js:778), <anonymous>:14:45)
    at Object.<anonymous> (app.js:778)
    at __webpack_require__ (app.js:660)
    at fn (app.js:84)
    at Object.<anonymous> (app.js:964)
    at __webpack_require__ (app.js:660)
    at app.js:709
    at app.js:712

Other components

They are working on creating other components? As Input, Radio, Select, Tooltip, etc ?

v0.6.0

Hello,

Do you have an estimated relase date for the version 0.6.0 ?

Thanks.

Server Side Rendering support

@gustojs mentioned earlier in #68 that vuikit not yet support SSR. I tried vuikit with Nuxt project and it doesn't work indeed.

@gustojs, please share, if you find solution for that.

Lets track updates here and join forces to make vuikit SSR compatible :)

Filename naming policy

Some issues with the datepicker-drop

Hi, thanks for creating these awesome vue components. However, I've been having some issues with the "vk-datepicker-drop" component.

1. When I click on the input field to generate the dropdown calendar, the calendar pops up above the input field, unless I shrink the page to a smaller width (I need it to always appear below the input field).
2. When I click on the "next" arrow to change the month, the month doesn't change unless I click out of the dropdown and then click back in.
3. Is it possible to make it so the dropdown calendar automatically minimizes after choosing a date? Right now I have to click outside to make the dropdown go away.

I'm using the vuikit cli that you created. Thank you for the help!

Button demo - iconLeft and iconRight on <vk-button-link> not working

Hey @miljan-aleksic !

I can not find the error currently but on the demo page the default <vk-button> is displaying the iconLeft and iconRight icons correctly. In the <vk-button-link> the icons don't show up.

This is the error message Vue dev tools gives me on the local dev build:

vue.js:1023 [Vue warn]: Error when evaluating expression "iconClass(iconLeft)": TypeError: scope.iconClass is not a function (found in component: <vk-button-link>)

My best guess is the fact that <vk-button-link> inherits from <vk-button> and since the scope is different. But I have no clue for a pull request 😞

Regards Sebastian

Feature request: Add possibility to define table slots

Let's say I would like to add a button to every row of my table. It would be nice to have a slot for this like:

<vk-table selectable
  trackBy="id"
  :fields="[{
    name: 'name',
    sortBy: true
  }, {
    name: 'hits',
    sortBy: true,
    headerClass: 'vk-table-width-minimum'
  }, {
    name: 'desc',
    header: 'Description'
  }, {
    name: 'interact' 
  ]"
  :rows="[
    { id: 1, name: 'Item A', hits: 100, desc: 'Description' },
    { id: 2, name: 'Item B', hits: 40, desc: 'Description' },
    { id: 3, name: 'Item C', hits: 700, desc: 'Description' }
  ]"
  @sort="sortOrder = arguments[0]"
  @change="rows = arguments[0]">
  <template slot="interact" scope="item">
    <button>Delete</button>
  </template>
</vk-table>

BootstrapVue also uses this technique:

https://bootstrap-vue.github.io/docs/components/table

vuikit and uikit3

Will vuikit addopt uikit3 from the start? or will you hold this off for a while? Would it take a lot of work to addopt uikit3?

Responsive tabs

I don't think at this moment in vuikit it's possible to have responsive tabs without uikit. Any plans to add this feature to the tabs ?

doc property for dropdown-target

hello a typo on the documentation for :

<vk-datepicker-drop :show="show"
target="#target"

=>

<vk-datepicker-drop :show="show"
**dropdown-**target="#target"

Missing tether ?

Hello,
I got this exeption with the date picker dropdown.
It trying to use an undefined instance of tether.
I cant find any reference to tether in deps.

vuikit.common.js?09d2:2422 Uncaught (in promise) TypeError: Cannot read property 'enable' of undefined(…)(anonymous function) @ vuikit.common.js?09d2:2422func

Notify is available in 0.6.0 ?

Hi,

I was wondering if the new feature Notify is available. I don't know how to check manually. Maybe you can teach me how for the next feature :)

How to render buttons and HTML in columns

Hi, thanks for your nice components

I've loaded and showing data in Table component properly, but in every row I have fields like isActive and an action column. I want to place HTML in those fields. How can it be achieved?

analyzing Uikit

Button.js: https://github.com/uikit/uikit/blob/develop/src/js/core/button.js

button:

• toggle aria-pressed=true/false on click
• prevent default on click if element is a[href="#"]

button-checkboxes:

• toggle aria-checked=true/false on click
• toggle uk-active on click
  -on uncheck set aria-checked=false attribute and remove uk-active class
• prevent default on click if element is a[href="#"]

button-radio:

• toggle aria-checked=true/false on click
• prevent default on click if element is a[href="#"]
• make only one button active on click

Filter-Control from 0.5

What happened to the Filter-Control from 0.5, was it removed accidentally?

https://github.com/vuikit/vuikit/blob/0.5/src/views/Filter.vue

Btw. I really enjoy your work, thank you!

Documentation about the use of datepicker dropdown?

Hi all,
i don't see any documentation, on how to use datepicker with this package ? Where can i find some info ?

Upload and selected files

Hi,

how can I trigger an dropped-event, if the file is selected and not dragged?

Regards,
Danny

datepicker component bug

Hi, again

I think you wrote wrong round brackets in this code (Datepicker/index.js#L51-L56)
If disabledDatesMoments is empty, then min ,max props are useless..
it should be changed as shown below.

isDisabled (date) {
    return !date.isBetween(this.minMoment, this.maxMoment) ||
        this.disabledDatesMoments.some(d =>
            d.format("YYYY-MM-DD") === date.format("YYYY-MM-DD")
        );
}

And one more,
prevMonth ,nextMonth compare logic is little bit strange..
Calendar/index.js#L77-L82

For example, If min == 2016-12-21 and select 2017-01-21, then.. i can't go December 2016.
so, i can't select 2016-12-24. 😫

I think prevMonth, nextMonth should have just "month", not include "date"..

Please check the issue~
Thanks!

incorrect day of week - datepicker component

Hi,

The above image is the capture of the official documentation (http://vuikit.github.io/vuikit/#/datepicker)

January 1, 2017 is not Saturday.
I think it is bug. Plz fix it! 😫
or.. how can i change locale of moment for datepicker components?

(+)
uikit

The above image is the capture of the uikit documentation (https://getuikit.com/docs/datepicker.html)
it's correct.