A responsive Vue UI library for web site interfaces

Related tags

vuejs ui vue uikit
Overview

Vuikit

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 NPM version The main package
vuikit-icons NPM version Icons collection
vuikit-theme NPM version 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:

License

MIT Β© Miljan Aleksic

Issues
  • Off-canvas example does not seem to work

    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.

    opened by kkinder 18
  • Server Side Rendering support

    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 :)

    opened by Al-Rozhkov 12
  • Bower?

    Bower?

    Any chance of making Vuikit available on bower?

    opened by davidkhess 11
  • How to keep Vuikit CSS local to the app?

    How to keep Vuikit CSS local to the app?

    Hello,

    I am using Vuikit, Vue + Webpack 4 to build an app which gets injected via a script tag onto a third party site.

    The app is collecting CSS props from the host site.

    Is there a way to ensure the CSS props neither are polluted by or pollute the parent page?

    Thanks in advance!

    opened by ydennisy 11
  • What version of UIKit is supported?

    What version of UIKit is supported?

    F.A.Q. 
    opened by muhajirdev 11
  • 0.8.6 has broken close icons for modals (building with Parcel)

    0.8.6 has broken close icons for modals (building with Parcel)

    Hi! Thanks a lot for the library.

    I try to get it working with Parcel build tool (https://parceljs.org/), but I get the following error on compilation:

    🚨  /Users/vladyslavbatyrenko/nodejs/platformio/frontend/node_modules/vuikit/lib/modal.js:13:22: Cannot resolve dependency './icons/close' at '/Users/vladyslavbatyrenko/nodejs/platformio/frontend/node_modules/vuikit/lib/icons/close'
      11 | import { addClass, removeClass } from './util/class';
      12 | import { mergeData } from './util/vue';
    > 13 | import IconClose from './icons/close';
         |                       ^
      14 | import IconCloseLarge from './icons/close-large';
      15 | import EventsMixin from './mixins/events';
      16 | import { css } from './util/style';
    

    Posted this issue to you guys first. I can see that you have your own vuikit-icons-loader for webpack, so I assumed Parcel would require a plugin as well.

    opened by mvlabat 11
  • Dropdown works only with vuikit.css

    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

    opened by dspangenberg 10
  • v0.6.0

    v0.6.0

    Hello,

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

    Thanks.

    opened by SaidTayebi 7
  • is this based in the latest UIKIT version??? are server render compatible??

    is this based in the latest UIKIT version??? are server render compatible??

    Hi guys, would be great if you can include in the README.md which uikit version are you using, not sure but I can't see flex component here https://vuikit.js.org/#/ ...so I assume it's not using the latest uikit version no???

    also would be great if you include which components are SSR compatible...thank you guys...

    opened by cocodrino 7
  • v-show (instead of v-if) for Tabs

    v-show (instead of v-if) for Tabs

    Is it possible to use v-show instead of v-if in the Tabs component? Looking to have all components within those tabs activated at load time rather than activated 'on tab'

    opened by paul-muckypuddle 7
  • Does offcanvas emit event?

    Does offcanvas emit event?

    Can you please clarify how to listen to those events?

    Thanks

    opened by Tropicalista 1
  • Sample Repositories Vuejs + Uikit

    Sample Repositories Vuejs + Uikit

    Where can I get sample repositories to study on?

    opened by jamols09 0
  • fix tabs href

    fix tabs href

    Tabs should be focusable so that they represent in tab order. And unless they have a href they won't be focusable. As they are in https://getuikit.com/docs/tab .

    (please note I have not tested this PR)

    opened by hosein2398 0
  • vk-nav-dropdown elements not rendering in IE11.

    vk-nav-dropdown elements not rendering in IE11.

    My vk-nav-dropdown is working just fine in Chrome, Safari, and Firefox. In IE11, however, clicking the dropdown does nothing. In the rendered html, the elements do not show up. I am using webpack 4 to compile my js and css.

    <div class="dropdown">
            <button class="title">Actions <i class="arrow"></i></button>
    
            <vk-dropdown
              mode="click"
              position="bottom-right"
              :offset="7"
              :delay-hide="0"
              ref="dropdown"
            >
              <vk-nav-dropdown v-if="type === 'careNote' && isMessageByCurrentUser">
                <vk-nav-item
                  title="Edit Note"
                  icon="pencil"
                  @click.prevent="triggerAction('edit')"
                />
                <vk-nav-item
                  title="Delete Note"
                  icon="trash"
                  @click.prevent="triggerAction('delete')"
                />
              </vk-nav-dropdown>
              <vk-nav-dropdown v-else>
                <vk-nav-item
                  title="Flag as Inappropriate"
                  icon="file-edit"
                  @click.prevent="triggerAction('flag')"
                />
              </vk-nav-dropdown>
            </vk-dropdown>
          </div>
    

    Chrome: Screen Shot 2019-03-27 at 3 06 26 PM

    IE11 Edge: Screen Shot 2019-03-27 at 3 05 44 PM

    Any ideas here? I'd rather not create a dropdown using html/javascript. I really like the provided vuikit/uikit dropdown. Thanks.

    bug 
    opened by kellermartin13 1
  • Is Vuikit still being developed?

    Is Vuikit still being developed?

    We can of course fork it and send back our changes, which we will most probably do, but before we invest our efforts I just would like to know why it was not developed in six months. Perhaps you arrived to a point where you realized UIKit is not relevant anymore more or your code has reach a dead end.

    F.A.Q. 
    opened by OndrejValenta 7
  • table header

    table header

    How can I add custom string to table column? The prop title only accept a string for now, but I would like to have html in there to add some custom string in the column header. Any help?

    opened by muhammedjenos 1
  • Error with resolveSlots in Navbar

    Error with resolveSlots in Navbar

    Navbar component throws an undefined data property.

    Project setup: Vue + Typescript project generated with Vue CLI 3

    When I tried using tried VUIKit in just a Vue and Javascript project, it works properly.

    Please find below the error stack trace:

    TypeError: Cannot read property 'data' of undefined
        at resolveSlots (vue.runtime.esm.js?2b0e:2666)
        at FunctionalRenderContext.slots (vue.runtime.esm.js?2b0e:4112)
        at new FunctionalRenderContext (vue.runtime.esm.js?2b0e:4119)
        at createFunctionalComponent (vue.runtime.esm.js?2b0e:4158)
        at createComponent (vue.runtime.esm.js?2b0e:4339)
        at _createElement (vue.runtime.esm.js?2b0e:4536)
        at createElement (vue.runtime.esm.js?2b0e:4461)
        at FunctionalRenderContext._c (vue.runtime.esm.js?2b0e:4133)
        at renderSlots (vuikit.esm.js?6d68:3344)
        at render (vuikit.esm.js?6d68:3387)
    
    opened by tnkemdilim 1
  • Offcanvas with overlay issue on iOS

    Offcanvas with overlay issue on iOS

    Hello,

    I try to use Offcanvas module, with the overlay option.

    All is good on some devices, but it's seems that there is an issue with iOS devices (like iphone 5S or iphone 6).

    When I launch debug with Xcode, I see that css class uk-offcanvas-overlay is added to body, and I think there is not good ?

    Thanks you. Regards,

    Nicolas.

    opened by bekreativ 1
  • Strange behavior with modal

    Strange behavior with modal

    I have multiple modals on my app and sometimes they aren't showing. Most of times when showing modal she pop in <div id="app"></div> 2018-10-10-200002_1920x1080_scrot

    but sometimes modal pop under the element where she is declareted but opacity is set to 0. 2018-10-10-200102_1920x1080_scrot

    If i set opacity to 1 the modal show but can't make her disapear even if the show.sync is set to false 2018-10-10-200206_1920x1080_scrot

    bug 
    opened by iNeoO 2
  • Notification and Vuex

    Notification and Vuex

    Hi, I want to make one notification in App.vue that available across all other component, and I try to use storage to save message notifications, instead of plain messages = [] in the App.vue I use messages = this.$storage.messages but it only work once even if I add a unique key into the payload.

    Any suggestion how I should do that?

    opened by xakiy 2
Releases(0.8.5)
Vue UI components with configurable classes ready for TailwindCSS

Vue-Tailwind For more info, check the official site: https://vue-tailwind.com/. VueTailwind is a set of Vue components created to be customized to ada

Alfonso Bribiesca 1.4k Jun 13, 2021
fun vue component library for my own use.

@knowscount/vue-lib vue component library containing fun stuff. ?? to-dos marked in issues. ?? usage see #3. to install the library, run npm install -

KnowsCount 9 Jun 5, 2021
Material web components for Vue.js

If you're looking for vue-mdl, check the mdl branch. To learn about what's happening, check #139 Vue Material Components web Material Components Web f

Eduardo San Martin Morote 1.2k Jun 3, 2021
πŸ‘©β€πŸŽ¨πŸ‘¨β€πŸŽ¨ A minimalist dark design system for Vue.js. Based components designed for the insomniacs who enjoy dark interfaces as much as we do.

Documentation You can browse the documentation for Vue Dark Mode on the website. Installation npm install @growthbunker/vuedarkmode # Or if you prefe

Julien Le Coupanec 1.1k Jun 11, 2021
Semantic-ui components easy in your vue project

Semantic-ui modules/components in you Vue project Using You can see the docs and demo here # install package npm install semvue --save Using any compo

Guilherme Waess 34 Jul 30, 2020
Buefy is a lightweight library of responsive UI components for Vue.js based on Bulma framework and design.

Buefy is a lightweight library of responsive UI components for Vue.js based on Bulma framework and design.

Buefy 8.7k Jun 11, 2021
A lightweight Vue.js UI library with a simple API, inspired by Google's Material Design.

Keen UI Keen UI is a Vue.js UI library with a simple API, inspired by Google's Material Design. Keen UI is not a CSS framework. Therefore, it doesn't

Josephus Paye II 4k Jun 2, 2021
🎁 Vue Component Development Kit

Vue Component Development Kit Inspired by Angular CDK ?? . Everything in VCDK should be in it's own package and consumable as such. Using this Reposit

Christian Kienle 77 Apr 11, 2021
🎨 Vue.js components implementing Microsoft Fluent Design

Vuent Vuent is a set of reusable UI components for Vue created according to Microsoft Fluent Design, in particular its official variation about buildi

Artur Mizera 220 Jun 3, 2021
Free and Beautiful Vue.js Admin Template

We’re working on Vuestic UI component library, which lets you easily customize components to your own design. Get early access and receive support fro

Epicmax 8k Jun 14, 2021
A mostly renderless Vue UI component and utility framework.

Banshee A mostly renderless Vue UI component and utility library. Introduction Banshee is a component library for Vue which seeks to only provide the

null 88 Jun 3, 2021
Naive UI - A Vue 3 Component Library. Fairly Complete. Customizable Themes

Naive UI - A Vue 3 Component Library. Fairly Complete. Customizable Themes. Uses Typescript. Not too Slow.

TuSimple 1.3k Jun 8, 2021
Bootstrap components built with Vue.js

vue-strap Bootstrap components built with Vue.js. This repository contains a set of native Vue.js components based on Bootstrap's markup and CSS. As a

Willem Franco 340 Jun 10, 2021
Office UI Fabric implementation for Vue.js

Office UI Fabric Vue Note: Because office-ui-fabric-js no longer support, this project need to rewrite using office-ui-fabric-core. But it's lots of w

null 273 May 27, 2021