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
  • Broken side bar on mobile

    Broken side bar on mobile

    I see that when we download the vuestic from github and build it, in the mobile version, the side bar wont work. no modifications done in the code. there is some overlap in mobile version. if i make the visibility hidden for the va sidebar then the visible links are clickable. image

    bug high priority 
    opened by asvae 0
  • login error use router

    login error use router

    Description

    Markup:

    // Your code
    

    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)
    • [ ] Improvement/refactoring (non-breaking change that doesn't add any feature but make things better)
    opened by bijankhazaei 0
  • questions handling strategy

    questions handling strategy

    https://stackoverflow.com/questions/tagged/vuestic

    We have multiple places where users can ask questions, let's discuss whether we wan to support any of them.

    discussion 
    opened by asvae 0
  • Language localization for Bangla language

    Language localization for Bangla language

    • I'm submitting a ...

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

      • feature request
    • What is the current behavior?

      • There are no Bangla language option on language drop-down
    • What is the expected behavior?

      • Expect Bangla option on language drop-down
    • What is the motivation / use case for changing the behavior?

      • Language localization for Bangla language
    • Other information

      • I am interested to develop the feature
    opened by ShekharUllah06 0
  • Laravel (and other backends) integration

    Laravel (and other backends) integration

    That's a research topic generally.

    Here's a case:

    • New user wants an app, that has a backend part. Let's say they come from PHP world, but that might be different frontend technology.
    • They want a somewhat working boilerplate with all strings attached, where they can easily expand functionality as they figure out the basics of frameworks.

    Curious if that's possible to handle from our side as well as valuable.

    discussion research 
    opened by asvae 0
  • Update to vuestic-ui 1.5.0

    Update to vuestic-ui 1.5.0

    • [x] at least no error when update vuestic-ui
    • [x] app.use(createVuestic({ config: vuesticGlobalConfig })) error with colors property in config need to move colors value to {colors: { variables: <prev colros value>}}
    • [x] buttons not rounded add VaButton: { round: true, } to components config
    • [x] text in sidebar still dark when section is selected just remove VaSidebar config pfrom globalConfig and it is fixed?
    • [ ] dropdowns in admin header (colors, countries) are deadб popover also dead
    • [x] breakpoints has been changed(?) so now classes like xl6 have some problems, breakpoints hardcoded in scss
    • [x] helper classes renamed, -- -> -, gutter--xl -> va-gutter, spacing classes must changed, display-2 -> va-h2
    • [ ] accordion multiply prop renamed to multiple
    • [ ] tree view dead
    opened by m0ksem 2
Releases(v3.1.0)
Owner
Epicmax
We make interfaces. #11 Vue.js developer on GitHub by Git Awards
Epicmax
:tada: A magical vue admin https://panjiachen.github.io/vue-element-admin

English | 简体中文 | 日本語 | Spanish SPONSORED BY 活动服务销售平台 客户消息直达工作群 Introduction vue-element-admin is a production-ready front-end solution for admin inter

花裤衩 80.1k Dec 31, 2022
Admin UI Template is a modern, responsive, and customizable admin UI template for your business.

Admin UI Template is a modern, responsive, and customizable admin UI template for your business. It contains reusable components, theme color, and design support along with dark theme support.

Open Template Hub 7 Dec 18, 2022
🎉 基于 vite 2.0 + vue 3.0 + vue-router 4.0 + vuex 4.0 + element-plus 的后台管理系统vue3-element-admin

vue3-element-admin ?? 基于 Vite 2.0 + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus 的后台管理系统 简介 vue3-element-admin 是一个后台前端解决方案,它基于 vue3 和 element-plu

雪月欧巴 84 Nov 28, 2022
Admin dashboard template built with tailwindcss & vue-jsx.

K UI Admin Dashboard Template (Vue 3 & JSX) ⚠️ This template is not finished yet and still in design phase. We are building it in public. Live preview

Kamona-UI 4 Aug 14, 2022
A template repository / quick start to build Azure Static Web Apps with a Node.js function. It uses Vue.js v3, Vue Router, Vuex, and Vite.js.

Azure Static Web App Template with Node.js API This is a template repository for creating Azure Static Web Apps that comes pre-configured with: Vue.js

Marc Duiker 6 Jun 25, 2022
Veloce: Starter template that uses Vue 3, Vite, TypeScript, SSR, Pinia, Vue Router, Express and Docker

Veloce Lightning-fast cold server start Instant hot module replacement (HMR) and dev SSR True on-demand compilation Tech Stack Vue 3: UI Rendering lib

Alan Morel 10 Oct 7, 2022
Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Onsen UI - Cross-Platform Hybrid App and PWA Framework Onsen UI is an open source framework that makes it easy to create native-feeling Progressive We

null 8.7k Jan 4, 2023
:necktie: :briefcase: Build fast :rocket: and easy multiple beautiful resumes and create your best CV ever! Made with Vue and LESS.

best-resume-ever ?? ?? Build fast ?? and easy multiple beautiful resumes and create your best CV ever! Made with Vue and LESS. Cool Creative Green Pur

Sara Steiert 15.8k Jan 9, 2023
Carpatin is a React JS Admin Dashboard Template that focuses on the management flows of a back-office application. We leverage the Material-UI power of stylizing the components in a way that feels more professional.

Carpatin Dashboard Free Carpatin is a React Js Admin Dashboard Template that focuses on the management flows of a back-office application. We leverage

Devias 64 Dec 12, 2022
Mosha-vue-toastify - A light weight and fun Vue 3 toast or notification or snack bar or however you wanna call it library.

Mosha Vue Toastify A lightweight and fun Vue 3 toast or notification or snack bar or however you wanna call it library. English | 简体中文 Talk is cheap,

Baidi Liu 187 Jan 2, 2023
:eyes: Vue in React, React in Vue. Seamless integration of the two. :dancers:

vuera NOTE: This project is looking for a maintainer! Use Vue components in your React app: import React from 'react' import MyVueComponent from './My

Aleksandr Komarov 4k Dec 30, 2022
Jenesius vue modal is simple library for Vue 3 only

Jenesius Vue Modal Jenesius vue modal is simple library for Vue 3 only . Site Documentation Installation npm i jenesius-vue-modal For add modals in yo

Архипцев Евгений 63 Dec 30, 2022
A plugin that can help you create project friendly with Vue for @vue/cli 4.5

vue-cli-plugin-patch A plugin that can help you create project friendly with Vue for @vue/cli 4.5. Install First you need to install @vue/cli globally

null 2 Jan 6, 2022
100 Modern CSS Buttons, Free And Royalty Free.

?? Contributions Currently, there are 100 buttons in this project, but we’d love to have more! If you have new button ideas, create an Issue. If you h

null 2.7k Jan 7, 2023
Vue 3 + Vite + SSR template based on Vite Plugin SSR and inspired by Vitesse

Vite Vue SSR Starter Vue 3 + Vite + SSR template based on Vite Plugin SSR and inspired by Vitesse Features ⚡️ Vue 3, Vite 2, TypeScript ?? Domain-Driv

Oleg Koval 10 Aug 2, 2022
Vue2.x plugin to create scoped or global shortcuts. No need to import a vue component into the template.

vue2-shortcut Vue2.x plugin to create scoped or global shortcuts. No need to import a vue component into the template. Install $ npm install --save vu

Graxi 37 Aug 14, 2022
Collection of CSS box-shadows for every taste contains more than 100 simple, beautiful and airy shadows.

Vue Box-shadows Collection of CSS box-shadows for every taste contains more than 100 simple, beautiful and airy shadows. Add beautiful shadow effects

Andrej Sharapov 29 Nov 14, 2022
🧞‍♂️ MESH·Y is a design tool to generate beautiful & colorful mesh gradients

Meshy is a design tool to generate beautiful & colorful mesh gradients. Generate multiple random variations of Mesh gradients along with cool color customizations. Export PNG image with custom resolution.

Anup Aglawe 255 Dec 22, 2022
Matteo Bruni 4.7k Jan 4, 2023