Free and Open Source UI Library for Vue 3

Overview

Vuestic UI Logo
Vue.js 3.0 UI Library
Developed by Epicmax. Designed by Vasili Savitski.

CI badge License Version

Documentation | Discord

Vuestic UI is forever free and open to contributions. See our issues, contributing guide and join discussions on our Discord to help us improve Vuestic UI experience.

Why use Vuestic UI?

  • Vue.js 3.0 compatible
  • MIT license
  • Feature-rich: more than 52 customizable components
  • Two built-in color scheme presets
  • Powerful configurations:
    • Local - configure components in-depth
    • Global - configure framework overall
  • Cross-browser and responsive
  • i18n-ready

Installation

First, make sure you have all prerequisites installed:

After checking the prerequisites, install Vuestic UI via npm/yarn:

npm install vuestic-ui
//or
yarn add vuestic-ui

Quick start

Make sure you're imported both styles and plugin into your entry file:

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import { VuesticPlugin } from 'vuestic-ui' //()
import 'vuestic-ui/dist/vuestic-ui.css' //()
//...
const app = createApp(App)
app.use(VuesticPlugin) //()
//...

Documentation

Information, guides and tutorials are available on vuestic.dev

Community

Ask questions at the official community discord server

Vuestic Admin

See Vuestic UI library in action. Vuestic Admin is a great example of a real-world web application based on Vuestic UI.

Contributing

Thanks for all your wonderful PRs, issues and ideas.
Youre always welcome to join: check out our contribution guides , open issues and discord server

Browsers support

We design Vuestic UI to support the latest modern web browsers.

IE / Edge
IE/Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
Edge last 2 versions last 2 versions last 2 versions last 2 versions

Can I hire you guys?

Yes! Say hi: [email protected] We will be happy to work with you! Other work weve done

Follow us

Stay up to date with the latest Vuestic news! Follow us on Twitter or Facebook

License

MIT license.

Issues
  • chore(deps): bump ssri from 6.0.1 to 6.0.2 in /packages/vue-cli-docs/old/nuxt-docs

    chore(deps): bump ssri from 6.0.1 to 6.0.2 in /packages/vue-cli-docs/old/nuxt-docs

    Dependabot is rebasing this PR

    Rebasing might not happen immediately, so don't worry if this takes some time.

    Note: if you make any changes to this PR yourself, they will take precedence over the rebase.


    Bumps ssri from 6.0.1 to 6.0.2.

    Changelog

    Sourced from ssri's changelog.

    6.0.2 (2021-04-07)

    Bug Fixes

    • backport regex change from 8.0.1 (b30dfdb), closes #19

    Commits
    Maintainer changes

    This version was pushed to npm by nlf, a new releaser for ssri since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 15
  • Fix SSR

    Fix SSR

    Description

    closes https://github.com/epicmaxco/vuestic-ui/issues/798

    I have tested vuestic-ui with vite (without ssr) and it's working fine.

    But there is a problem with SSR (with vite).

    To fix that we need to remove all manipulations with DOM outside vue lifecycle hooks.

    Deprecated components

    Also, we need to remove dependencies that depend on DOM API (medium-editor and flatpickr). For that reason, I have deprecated VaDatePicker and VaMediumEditor components. It's okay because we even don't have documentation pages for this two.

    With this PR vuestic runs on SSR + VITE template taken from here: https://github.com/vitejs/vite/tree/main/packages/playground/ssr-vue image

    Types of changes

    • [ ] Bug fix (non-breaking change which fixes an issue)
    • [ ] New feature (non-breaking change which adds functionality)
    • [x] Breaking change (fix or feature that would cause existing functionality to not work as expected)
    • [ ] Improvement/refactoring (non-breaking change that doesn't add any feature but make things better)
    review required 
    opened by m0ksem 9
  • Button Multiline Text Issue

    Button Multiline Text Issue

    • What is the expected behavior? Badges should support multiline text with no UI issues.

    • What is the current behavior? Badges don't support multiline text.

    • Steps to reproduce, ideally also a screenshot or gif if it's a style issue image

    • Other information

    bug 
    opened by alexanderrudnik 8
  • Horizontal/Circle progress

    Horizontal/Circle progress

    Docs

    HorizontalProgressBar

    Props

    • [x] value: Number - percentage value for the progress
    • [x] buffer: Number - percentage value for the buffer
    • [x] indeterminate: Boolean - infinite animation when loading progress is unknown
    • [x] color: String - use theme plugin (to rename theme)
    • [x] rounded: Boolean, default: true - make the bar rounded
    • [x] size: Number | String - height of the bar in pixels or height in css units.
    • [x] 'reverse: Boolean' - should reverse progress bar direction (useful for RTL languages).
    • [x] ~small: Boolean - called thin in zeplin~ - implemented in size prop
    • [x] ~large: Boolean - called thick in zeplin~ - implemented in size prop

    Slots

    • [x] default - default slot

    CircularProgressBar

    Props

    • [x] value: Number - percentage value for the progress
    • [x] color: String - use theme plugin (to rename theme)
    • [x] indeterminate: Boolean - infinite animation when loading progress is unknown
    • [x] size: Number | String - bar size (diameter) in pixels or size in css units.
    • [x] thickness: Number - circle border size in percent of component size

    Slots

    • [x] default - default slot

    Design

    • [ ] Present to @xx13 after finishing.

    Notes

    • [x] ~Rename existing components: horizontal to linear and circle to circular~ Renamed to VaProgressBar, VaProgressCircle. Not exactly as planned, but sounds ok.

    Refs

    Vuetify linear / circular Quasar linear / circular Ant

    feature review required 
    opened by ilearnjs 7
  • Bump elliptic from 6.5.3 to 6.5.4 in /packages/docs

    Bump elliptic from 6.5.3 to 6.5.4 in /packages/docs

    Bumps elliptic from 6.5.3 to 6.5.4.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 7
  • When i use chrome, the display area of Input's label  is too small when the language of label is chinese.

    When i use chrome, the display area of Input's label is too small when the language of label is chinese.

    • What is the expected behavior? Complete display of Chinese characters in Input's label
    • What is the current behavior? When I use chrome, Chinese characters cannot be displayed completely; Firefox and Safari is Ok.
    • Steps to reproduce, ideally also a screenshot or gif if it's a style issue
    1. chrome FireShot Capture 003 - Vuestic Admin - localhost
    2. Firefox is Ok WechatIMG68
    • Other information
    bug no repro 
    opened by xdbytes 6
  • va-avatar component, size mixin created

    va-avatar component, size mixin created

    closes #22

    https://app.zenhub.com/workspaces/vuestic-ui-5d8b8200ab23e8000107c893/issues/epicmaxco/vuestic-ui/20

    image

    feature 
    opened by whitel1ght 5
  • fix: #810 #829 #830 #833 #836 sidebar items and va-collapse

    fix: #810 #829 #830 #833 #836 sidebar items and va-collapse

    Description

    Not sure how good this solution is, but I'm having issues with using mixins when defining components with defineComponent (and VaSidebarItem happens to be the one defined that way).

    So I've deviced to rewrite the Keyboard Only Focus Mixin the way that it's became a composable: useKeyboardOnlyFocusMixin.

    It uses a bit different approach that the old mixin does (in terms of defining which type of focus event happened: keyboard or mouse), but still it solves #810 .

    // Your code
    

    Types of changes

    • [x] Bug fix (non-breaking change which fixes an issue)
    • [x] New feature (non-breaking change which adds functionality)
    • [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
    • [ ] Improvement/refactoring (non-breaking change that doesn't add any feature but make things better)
    review required 
    opened by smellyshovel 5
  • Button component

    Button component

    Docs

    Props

    Add to existing component:

    • [ ] loading: Boolean
    • [ ] block: Boolean - takes all awailable width
    • [ ] round: Boolean

    Notes

    • Button icons should work with material design icons

    Design

    • [ ] Present to @xx13 after finishing.

    Refs

    ready for implementation 
    opened by jean-moldovan 5
  • Validation system

    Validation system

    This issue is intended for discussion and laying out validation.

    Parts

    • input components support (#104) image
    • form component (#103)
    • library support (#112).
    WIP issue discussion 
    opened by asvae 4
  • Fix #968 Add reactive locale in links to DocsLink router-link

    Fix #968 Add reactive locale in links to DocsLink router-link

    Description

    close #968

    Some of the changes:

    • add processing locale within DocsLink
    • replace relative links in page-config files
    • rewrite DocsLink in Composition API style

    Types of changes

    • [x] Bug fix (non-breaking change which fixes an issue)
    • [ ] New feature (non-breaking change which adds functionality)
    • [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
    • [x] Improvement/refactoring (non-breaking change that doesn't add any feature but make things better)
    docs ready to merge 
    opened by RVitaly1978 1
  • Some components are missing properties in the docs.

    Some components are missing properties in the docs.

    There are some properties missing in a props lists of our docs for some of the components.

    I think it could miss properties imported by Mixins.

    Looks like an automatic generation of properties description works only for explicitly declared props inside a component.

    For example I've found it in VaForm:

    vaFormNoPropsDescription

    There are only two properties in the description while in reality VaForm imports FormComponentMixin that has 10 more props.

    Most likely there are more components with this issue.

    bug 
    opened by Derranion 0
  • DocsLink create router-link without reactive locale in relative links

    DocsLink create router-link without reactive locale in relative links

    • The current implementation

      • in DocsHelper.Link: import { locale } from '../../../../helpers/I18nHelper' DocsHelper.link('configurationGuide.readMore', `/${locale}/services/components-config`)
      • in DocsLink.vue: router-link receive href without reactive locale
    • Proposed implementation

      • in DocsHelper.Link: DocsHelper.link('configurationGuide.readMore', `/services/components-config`)
      • in DocsLink.vue: router-link take reactive locale from useI18n hook
    docs 
    opened by RVitaly1978 0
  • Eslint not working in docs in precommit

    Eslint not working in docs in precommit

    bug docs 
    opened by m0ksem 0
  • Fix #962 Add markdown-it plugins for processing links in MarkdownView

    Fix #962 Add markdown-it plugins for processing links in MarkdownView

    Description

    close #962

    Some of the changes:

    • add setTargetBlankToLinks plugin (add to all markdown links attribute target="_blank")
    • add setOriginLocationToRelativeLinks plugin (set window.location.origin and locale (from useI18n hook))
    • split MarkdownIt into a separate instance
    • rewrite MarkdownView in Composition API style

    Types of changes

    • [x] Bug fix (non-breaking change which fixes an issue)
    • [ ] New feature (non-breaking change which adds functionality)
    • [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
    • [x] Improvement/refactoring (non-breaking change that doesn't add any feature but make things better)
    docs ready to merge 
    opened by RVitaly1978 1
  • Complex solution for dropdowns, modals and popover.

    Complex solution for dropdowns, modals and popover.

    Description

    Closes #850!

    First of all, merged #859 and #880.

    1. Added teleport functional for dropdowns and modals to prevent overflowing. 1.1 Added prop that responsible for teleport destination selector (Default: "body"). 1.2 Added prop that disables teleport feature (In rare cases, might be useful).
    2. Removed popover component from the project.
    3. Fixed select component styling issue, after teleporting dropdown to DOM root.
    4. Changed demo's descripition for incoming fixes.

    Types of changes

    • [x] Bug fix (non-breaking change which fixes an issue)
    • [x] New feature (non-breaking change which adds functionality)
    • [x] Breaking change (fix or feature that would cause existing functionality to not work as expected)
    • [ ] Improvement/refactoring (non-breaking change that doesn't add any feature but make things better)
    opened by DieselTripleX 0
  • Make seamless intergration block clickable

    Make seamless intergration block clickable

    image

    Remove these properties from our and other components.

    bug docs 
    opened by m0ksem 0
  • Do you need help to provide a Chinese translation document?

    Do you need help to provide a Chinese translation document?

    First of all, I think this is a pretty good Vue3 component library, but the catch is that there is no Chinese document, which cannot make it more convenient for Chinese developers and users.

    docs 
    opened by Zenquan 3
  • Demo is not working for some of the components.

    Demo is not working for some of the components.

    Demo is not working for:

    • [ ] VaColorPicker.demo
    • [ ] VaColorSlider.demo
    • [ ] color-themes.demo
    • What is the expected behavior? Demo should open demo examples and do not break.

    • What is the current behavior? Demo is not working for previously mentioned examples also it breaks completely after clicking on these examples.

    • Steps to reproduce, ideally also a screenshot or gif if it's a style issue

    1. Press on any listed above demo
    2. It will not open and break demo completely

    colorPickerSliderThemesBreakesDemo

    bug 
    opened by Derranion 0
Releases(v1.1.2)
  • v1.1.2(Jul 2, 2021)

    Notably

    • Russian translation (thanks @mxmvshnvsk)
    • Dropdown fixes
    • Removed bulk dependencies (medium-editor, gravatar etc)
    • Fonts integration in vue-cli plugin
    • Select fixes (more fixes in the oven)
    Source code(tar.gz)
    Source code(zip)
  • v1.1.0(Jun 11, 2021)

    After major 1.0.0 release unfinished businesses were left, and this release is exactly for that:

    • ssr fix - should work with vite now!
    • fix bundle size (482KB JS now, was slightly more >.>)
    • remove medium-editor wrapper from vuestic-ui, move to vuestic-admin.
    • dropdown button fix
    • sidebar fixes
    • color fixes
    • and smaller things
    Source code(tar.gz)
    Source code(zip)
Owner
Epicmax
We make interfaces. #11 Vue.js developer on GitHub by Git Awards
Epicmax
Free and Open Source UI Library for Vue 3

Free and Open Source UI Library for Vue 3 ??

Epicmax 602 Jul 28, 2021
Vue Bootstrap with Material Design - Powerful and free UI KIT

Vue Bootstrap with Material Design Based on the latest Bootstrap 4 and Vue. 400+ material UI elemens, 600+ material icons, 74 CSS animations, SASS fil

MDBootstrap 810 Jul 24, 2021
zircle-ui is a frontend library to develop zoomable user interfaces.

A frontend library to develop zoomable user interfaces. Like it? Get involved, fork it or leave a star. Breaking news! I've been working on a new zoom

Zircle 871 Jul 13, 2021
Vue implementation of the Carbon Design System

carbon-components-vue Vue implementation of the Carbon Design System A collection of Carbon Components implemented using Vue.js. Carbon Vue library -

Carbon Design System 379 Jul 22, 2021
N3-components , Powerful Vue UI Library.

N3-components - Powerful Vue Library. N3 components library is built with Vue.js, is a powerful library for frontend or full-stack engineers to build

null 1k Jul 22, 2021
Shards Vue is a free, beautiful and modern Vue.js UI kit based on Shards.

Shards Vue is a free, beautiful and modern Vue.js UI kit based on Shards. Documentation & Demo Official Page Getting Started Getting started with Sh

DesignRevision 395 Jun 24, 2021
A high quality component library built on Vue.js 2.0

dao-style A high quality component library built on Vue.js. English | 蝞雿銝剜 Docs latest Who's using dao-style DaoCloud DaoVoice If you are also using d

DaoCloud.io 113 Jul 7, 2021
Material Component Framework for Vue

Supporting Vuetify Vuetify is a MIT licensed project that is developed and maintained full-time by John Leider and Heather Leider; with support from t

vuetify 31.6k Jul 25, 2021
Inkline is the customizable Vue.js UI/UX Library designed for creating flawless responsive websites.

Inkline Inkline is the customizable Vue.js UI/UX Library designed for creating flawless responsive websites. Inkline is written and maintained by @ale

Inkline 760 Jul 22, 2021
Inkline is the customizable Vue.js UI/UX Library designed for creating flawless responsive websites.

Inkline Inkline is the customizable Vue.js UI/UX Library designed for creating flawless responsive websites. Inkline is written and maintained by @ale

Inkline 762 Jul 26, 2021
Oruga is a lightweight library of UI components without CSS framework dependency

Oruga UI is like a caterpillar, minimal and yet functional. It's in your hands turning it into a butterfly ( ?? ) => ?? Oruga is a lightweight library

Oruga 387 Jul 27, 2021
An emerging UI framework for Vue.js & Vue 3 with only the bright side. 儭

Wave UI An emerging UI framework for Vue.js & Vue 3 with only the bright side. 儭 Demo & Documentation antoniandre.github.io/wave-ui install npm i wav

Antoni 236 Jul 21, 2021
BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js. With extensive and automated WAI-ARIA accessibility markup.

With more than 85 components, over 45 available plugins, several directives, and 1000+ icons, BootstrapVue provides one of the most comprehensive impl

BootstrapVue 13.3k Jul 25, 2021