Free and Beautiful Vue.js Admin Template

Overview

We’re working on Vuestic UI component library, which lets you easily customize components to your own design.
Get early access and receive support from the core team! 😎
Sign up now



English | 简体中文 | 日本語

Vuestic Admin

Free and beautiful Vue.js admin template with 44+ custom UI components.
Developed by Epicmax. Designed by Vasili Savitski

Demo | New white theme demo | Documentation

Circleci

New white theme demo

Installation

First of all, make sure you have all prerequisites installed:

After checking the prerequisites, follow these simple steps to install and use Vuestic Admin:

# clone the repo
$ git clone https://github.com/epicmaxco/vuestic-admin.git myproject

# go into app's directory and install dependencies:
$ cd myproject

Then, if you use npm:

$ npm install

# serve with hot reload at localhost:8080 by default.
$ npm run serve

# build for production
$ npm run build

# build for production and view the bundle analyzer report.
$ npm run build --report

If you use yarn:

$ yarn install

# serve with hot reload at localhost:8080 by default.
$ yarn serve

# build for production
$ yarn build

# build for production and view the bundle analyzer report.
$ yarn build --report

Features

Responsive layout | charts (Chart.js) | progress bars | forms | selects | date pickers | checkboxes and radios | static tables and data tables | medium editor | smooth typography | buttons | collapses | color pickers | timelines | toasts | tooltips | popovers | icons | spinners | modals | file upload | chips | trees | cards | ratings | sliders | chat | maps (Google, Yandex, Leaflet, amMap) | login/signup pages templates | 404 pages templates | i18n

Browser Support

Modern browsers and IE11

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

Contributing

Thanks for all your wonderful PRs, issues and ideas. You’re always welcome to join!

Awards

By @flatlogic marketplace

Can I hire you guys?

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

Follow us

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

License

MIT license.

Comments
  • Vuestic bugs.

    Vuestic bugs.

    Add found bugs as comments behind this issue. One comment - one bug. Thanks.

    Testing strategy is described in #610.

    Check current staging here: http://vuestic-epicmax.asva.by

    ❗ To note

    • if you finished working on post - make a notice in header (such as "addressed in release"),
    • make sure to increment the of your bug submit so that it can be easier to track, group and fix them.
    • Please leave a notice if bug reproduces only on safari or something obscure.
    • P5 in header means highest priority (must be done till release). P1 - means we can ignore. 2-4 - in betweenish. When fixing, select items with higher priority.

    Conventions

    :rocket: means that the bug is fixed, checked and approved :eyes: means that somebody's already working on the bug report and you should pick another one

    TODO

    Not fixed, but in progress

    bug 
    opened by asvae 61
  • Update bootstrap to beta3

    Update bootstrap to beta3

    Update bootstrap and boostrap-vue dependency to 4.0.0-beta3 and 1.1.0

    • Fix import call (need bottstrap's functions now in scss import)
    • Fix some variables
    • Fix Dropdown directive
    • Fix Progress Bar/Circle Progress Bar scss
    • Remove Bulma-vue-expand and bulma and replace it by B4's Collapse
    • transform relative node_modules @import in scss part of vue files of vuestic component to ~[node_modules] form (cf commit dc25a63 )

    • Proposal for not relative JS imports for vuestic-components ( cf commit 25ab85a )

    ready to merge reviewed 
    opened by atalargo 29
  • Feature Suggestions

    Feature Suggestions

    1. Internationalization (i18n)
    2. Theme switch (dark/light)
    3. Forms like typeforms [https://www.typeform.com/]
    4. UI Blocker (during form submissions)
    5. Route-change animations (like what nuxt does)
    6. Keyboard navigation
    suggestion discussion 
    opened by MrClan 15
  • Provide a toned down theme

    Provide a toned down theme

    The feedback (please check it!) on reddit was great. But some of the users indicated that the colors are too bright for them.

    The idea is to provide a theme that's less bright (@smartapant: more calm) but generally the same. Might be more dull, so enterprise/corporate guys could use it.

    You can play with color pickers on https://vuestic.epicmax.co/, then pass @asvae or @smartapant these variables with a couple screenshots.

    discussion UI/UX 
    opened by asvae 14
  • Upgrade from 1.4.0 to 1.5.0

    Upgrade from 1.4.0 to 1.5.0

    I'm developing our site with vuestic-admin. It is very powerful framework.

    I found it is upgraded 1.5.0.

    How can I upgrade my 1.4.0 based project ? ? ?

    Please help ~

    documentation 
    opened by cowboy93 11
  • Vuestic bugs. The Sequel.

    Vuestic bugs. The Sequel.

    This task is a continuation of #616

    Add found bugs as comments behind this issue. One comment - one bug. Thanks.

    Testing strategy is described in #610. (Reserved for vasily issues: https://docs.google.com/document/d/1S3-QwgYSouDCc1n24hXM27zAdxsp0KK8-HBAhGxyjOo/edit#)

    Check current staging here: http://vuestic-epicmax.asva.by

    ❗ To note

    • if you finished working on post - make a notice in header (such as "addressed in release"),
    • make sure to increment the of your bug submit so that it can be easier to track, group and fix them.
    • Please leave a notice if bug reproduces only on safari or something obscure.
    • P5 in header means highest priority (must be done till release). P1 - means we can ignore. 2-4 - in betweenish. When fixing, select items with higher priority.

    Conventions

    :rocket: means that the bug is fixed, checked and approved :eyes: means that somebody's already working on the bug report and you should pick another one

    TODO

    Now there are no correct statuses about problems below

    bug 
    opened by Kreezag 10
  • How to bring multiple children under /src/store/modules?

    How to bring multiple children under /src/store/modules?

    Hi,

    For my project, there will be multiple roles, say student and company. So, what I thought is entirely having two set of things in components and store modules.

    So, inside src/components, I created two folders src/components/company and src/components/student and kept the related components under that.

    Like that, I wanted to have multiple modules for both as the sidebar items will have different things. So, I changed /src/store/modules/menu/ into two: /src/store/modules/company/menu/ and /src/store/modules/student/menu/.

    I changed the store file and all accordingly. But, I receive an error from Layout.vue due to breadcrumbs, as I am stuck and confused about how to change that in getters.js

    Errors:
    1. Cannot read property 'menu' of undefined | studentMenuItems (getters.js?c729:3)
    2. TypeError: Cannot read property 'menu' of undefined |  VueComponent.breadcrumbs (Layout.vue?9bde:51)
    

    below is my getters.js, please direct me how to make this work or is there a better way to solve my use-case. Please let me know.

    import utils from 'services/utils'
    
    const studentMenuItems = state => state.student.menu.items
    const companyMenuItems = state => state.company.menu.items
    const sidebarOpened = state => state.app.sidebar.opened
    const toggleWithoutAnimation = state => state.app.sidebar.withoutAnimation
    const config = state => state.app.config
    const palette = state => state.app.config.palette
    const isLoading = state => state.app.isLoading
    const breadcrumbs = state => {
      return (keyword) => utils.findInNestedByName(state.menu.items, keyword)
    }
    
    export {
      studentMenuItems,
      companyMenuItems,
      toggleWithoutAnimation,
      sidebarOpened,
      config,
      palette,
      isLoading,
      breadcrumbs
    }
    
    
    question 
    opened by harishankards 10
  • Why nav and sidebar is embedded into view when creating a new component ?

    Why nav and sidebar is embedded into view when creating a new component ?

    I created a component here: src/components/landing/Landing.vue. I set up the route for it and when I viewed that component in the browser, it's surrounded by navbar and sidebar. Whereas, I want to achieve a page with my own design. Please suggest how would I do that?

    Also, if I add an item to the sidebar, the item is displayed as if it's active. But it's not, what class I should use. Please suggest.

    question 
    opened by harishankards 10
  • Vuestic-wizard vertical has buttons aligned in separate line instead of inline

    Vuestic-wizard vertical has buttons aligned in separate line instead of inline

    Hi,

    I'm using vuestic-wizard in a vertical manner, the navigation buttons back and confirm are aligned in separate lines instead of being it in a single line.

    Please refer the below screenshot. image

    question 
    opened by harishankards 9
  • Make root layout clean (no footer and header)

    Make root layout clean (no footer and header)

    Router is used only for main section, not for header or footer

    What's the problem? - not possible to make pages without footer and header (required for demos) How to fix? - app root should be empty page with router view Estimate - 3 hours

    opened by asvae 9
  • Fixed sidebar/navbar

    Fixed sidebar/navbar

    1. Prepare css class to make sidebar/navbar either fixed or static
    2. Make it possible to control the state of navbar/sidebar type via vuex

    Quick and dirty styles might be found in #116

    Interface

    Fixed layout is default.

    Static layout (header and navbar scoll with page)

    <layout static/>
    
    

    Fixed layout (header and navbar are pinned, content is scrolled independently)

    <layout/> 
    
    feature 
    opened by smartapant 9
  • build(deps-dev): bump vite from 2.9.12 to 2.9.13

    build(deps-dev): bump vite from 2.9.12 to 2.9.13

    Bumps vite from 2.9.12 to 2.9.13.

    Changelog

    Sourced from vite's changelog.

    2.9.13 (2022-06-27)

    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] 0
  • Installation choice of vue-cli and vite

    Installation choice of vue-cli and vite

    Right now - the only option you're getting when you clone project is vue-cli. That's easy for us to support, but not ideal for our user.

    What we instead would want to do is likely to allow a choice of nuxt and vue-cli. Here's a couple reasons why users would prefer to have a choice:

    • Nuxt is higher maintenance cost, but gives good SSR support out of the box. So better suited for content-based and SEO optimized projects.
    • Vue-cli is easier to support, and is good for admin projects, that don't need SSR (which is majority of admin projects).

    Here's a couple of ways we can handle this out of my head (we can find more ways on discussion):

    • In github repo keep vue-cli repo as right now. But have a script somewhere that creates fresh nuxt project and reassembles vue-cli repo to fit into nuxt project.
    • Have an installer, list of abstracted pages and configs for vue-cli/nuxt. Installer would create fresh vue-cli/nuxt project, attach pages and apply configs. That way we would keep minimal stuff in repo.
    • [ ] For either of solutions staging is mandatory, so that we can test if something is broken.
    discussion key feature 
    opened by asvae 0
  • Add template install to installation options

    Add template install to installation options

    Installation options are here: https://github.com/epicmaxco/vuestic-admin#installation

    image

    Here's an official doc link we can use https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-repository-from-a-template

    ready for implementation 
    opened by asvae 0
  • Error compiling project

    Error compiling project

    I'm tryining to compile the project with the latest vue version (3.2.37) and the latest of vuestic-ui (1.4.6), but I have this error:

     ERROR  Failed to compile with 1 error                                                                                                                                      15:30:58
    
     error  in ./node_modules/vuestic-ui/dist/esm/index53.js
    
    Module parse failed: Unexpected token (14:36)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    | import 'colortranslator';
    | 
    > const getPropsData = (slot) => slot?.props;
    | 
    | const getIsActive = (slot) => !!slot?.props?.active || false;
    
     @ ./node_modules/vuestic-ui/dist/esm/main.js 60:0-79 60:0-79 60:0-79 60:0-79
     @ ./src/main.ts
     @ multi (webpack)-dev-server/client?http://172.27.2.111:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts
    

    Can someone help me?

    opened by betta73 0
  • Switch in form elements page are not implemented correctly

    Switch in form elements page are not implemented correctly

    Note: for support questions, please use stackoverflow. This repository's issues are reserved for feature requests and bug reports.

    • I'm submitting a ...

      • bug report
    • Do you want to request a feature or report a bug?

    • Bug
    • What is the current behavior? Switch are not disabled, and switch size are not according to label i.e small and large

    • If the current behavior is a bug, please provide the steps to reproduce, ideally also a screenshot or gif if it's a style issue

    1. go to https://vuestic.epicmax.co/admin/forms/form-elements
    2. scroll down to last section
    3. Yo will the switch are not implement according to their labels
    4. firefox_x4FVE2AweP
    • What is the expected behavior? It show the correct state as defined
    opened by khusroohayat 0
Releases(v3.0.2)
Owner
Epicmax
We make interfaces. #11 Vue.js developer on GitHub by Git Awards
Epicmax
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 Sep 23, 2022
Vue UI and data visualization components

DevExtreme Vue UI and Visualization Components This project allows you to use DevExtreme components in Vue applications. Documentation Technical Demos

Developer Express Inc. 240 Sep 11, 2022
A Vue & Vue3 reliable, simple and touch-ready panes splitter / resizer.

A Vue & Vue3 reliable, simple and touch-ready panes splitter / resizer.

Antoni 1.1k Sep 26, 2022
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
DaisyUI - Tailwind CSS Components Adds component classes like btn, card and more to Tailwind CSS

DaisyUI - Tailwind CSS Components Adds component classes like btn, card and more to Tailwind CSS

Pouya Saadeghi 14.6k Oct 2, 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
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
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 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 projec

Vuikit 1.5k Sep 8, 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
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
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
👩‍🎨👨‍🎨 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 Sep 17, 2022
🎨 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 268 Sep 17, 2022