A responsive Vue UI library for web site interfaces

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

Comments
  • 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
  • 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
  • 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
  • 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
  • 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
  • Dropdown Orientation

    Dropdown Orientation

    I have a simple issue possibly already covered here. My dropdown drops down horizontally rather than the default vertically.

    I am having a look at the documents for Drop as suggested.

    I have tried setting mode to click and position on vk-dropdown to something vertical for example. I set mode="click" with success for example. Set position has no effect.

    I have tried importing the uikit — without the v — stylesheet following your suggestions in the issue cited above. Tried direct reference to the local version in node_modules as well as importing it in main.js of my Vue template as follows.

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    import Vuikit from 'vuikit'
    import VuikitIcons from '@vuikit/icons'
    import '@vuikit/theme'
    import 'uikit/dist/css/uikit.min.css'
    import UiKit from 'uikit'
    
    Vue.use(Vuikit)
    Vue.use(VuikitIcons)
    

    And so on. My HTML follows the «Nav in Dropdown» snippet in your docs and looks like this.

    
        <div class="vk-inline">
          <vk-button type="default" size="large"><i class="material-icons">local_bar  </i>&nbsp;Drop Down Tonight</vk-button>
          <vk-dropdown position: top-center mode='click'>
            <vk-nav-dropdown>
              <vk-nav-item title="Monkeys" active></vk-nav-item>
              <vk-nav-item title="Gazelles"></vk-nav-item>
              <vk-nav-item  title="Lions"></vk-nav-item>
              <vk-nav-item title="Jackals"></vk-nav-item>
              <vk-nav-item title="Warthogs"></vk-nav-item>
              <vk-nav-item>Water Buffalo</vk-nav-item>
              <vk-nav-item title="Rhinoceros"></vk-nav-item>
            </vk-nav-dropdown>
          </vk-dropdown>
    
    

    Having initial difficulty with modal and offcanvas as well but one thing at a time. Thanks hope I am not abusing your kind attention.

    opened by bretonio 7
  • How to install and use

    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

    F.A.Q. 
    opened by muminoff 7
  • Icons are not working in Internet Explorer 11

    Icons are not working in Internet Explorer 11

    Icons are not working in Internet Explorer 11, because for some reason all <svg>-Tags are empty.

    Internet Explorer 11 | Firefox :-------------------------:|:-------------------------: a | firefox_2018-08-23_20-49-49 image | image

    To reproduce it just open https://vuikit.js.org/guide/icons/ in Internet Explorer 11 or create a basic vue project with vuekit and add a icon control or any control that uses icons (e.g. Offcanvas (Close-Button) or Spinner)

    Icons from UIkit itself are working in Internet Explorer 11 (see https://getuikit.com/docs/iconnav)

    bug 
    opened by DanielEgbers 6
  • `@vuikit/theme` does not get bundled during `npm run build`

    `@vuikit/theme` does not get bundled during `npm run build`

    Hello.

    I am using the following statement in main.js to globally load vuikit css.

    import '@vuikit/theme';
    

    While this works perfectly while npm run serve, in the production result of npm run build, the CSS is not loading. However, there are other internal css files I'm loading in main.js such as:

    import '@/assets/scss/base/colors.scss';
    import '@/assets/css/core.css';
    

    but they get bundled correctly.

    opened by AyushG3112 6
  • 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
Releases(0.8.5)
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 9.3k Sep 26, 2022
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 4.1k Oct 3, 2022
A Vue.js 2 UI component library.

atlas Documentation and examples at https://vue-atlas.com Installation and usage $ yarn add vue-atlas # or $ npm install vue-atlas Usage Import everyt

Jonathan Pyers 184 Aug 19, 2022
🧬 Equal is a Vue 3 UI library based on TypeScript

Equal UI Equal UI is a Vue 3 components library with 30+ components based on TypeScript and personal design system. Explore Equal UI docs Features Ent

Yan Savinov 848 Sep 24, 2022
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 13, 2021
Components library for VUE used by the Ebury online team

Components library for VUE used by the Ebury online team

Ebury 18 Aug 26, 2022
Simple components library used for building lightweight vuejs projects

slim-ui slim-ui is a simple vue components library contains needed UI elements. It was developed to solve zerodha's application frontend needs and gen

htoniv 54 Oct 3, 2022
A Component Library for Vue3.0 + ts

A Component Library for Vue3.0 + ts

tflin 12 Jul 7, 2022
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 Sep 29, 2022
Vue components based on the JUI components available in Vue.js

vue-uix A vue component library based on the JUI components available in vuejs. Installation NPM npm install --save vue-uix Browser (Legacy) If you ar

JUI Framework 15 Feb 9, 2021
We are refactoring it, using the latest Vue and Bulma. WIP

Vue Bulma WIP We are refactoring it, using the latest Vue and Bulma. Todo vue-next vue-bulma bulma v0.8 modules Sponsors Currently, I am a freelancer

null 9.5k Sep 20, 2022
Bootstrap 3 components implemented by Vue 2.

If this project has helped you out, please support it with a star ?? . 中文文档 Introduction uiv is a Bootstrap 3 component lib implemented by Vue 2. Ligh

uiv 915 Oct 1, 2022
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 341 Jul 1, 2022
high scalability && freedom vue ui components

En|中文 Docs Overview The goal of jsmod is to provide a high degree of freedom (high scalability) ui components, and unified desktop and mobile usage, i

gaochao 73 Dec 10, 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
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 275 Aug 24, 2022
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 8.9k Oct 6, 2022
Semantic UI integration for Vue

Semantic UI Vue Website · Installation · Configuration (TBD) Looking for maintainers! There is a lot to do and few maintainers with little time :). If

Semantic UI Vue 938 Oct 5, 2022
New Framework Components for Vue.js 2

Supporting through Patreon Vuesax is an open source MIT project if you want to contribute to keep improving, If you are interested in supporting this

Lusaxweb 5.5k Oct 6, 2022