Free and Beautiful Vue 3 Admin Template

Overview

Vuestic UI Logo

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

Light theme demo | Semi-dark theme demo | Original theme demo | Vuestic UI documentation

Vuestic Admin is built with Vuestic UI. See our issues, contributing guide and join discussions on our discord server to help us improve Vuestic Admin & Vuestic UI experience.

Circleci

Documentation

Documentation, guides and tutorials are available on vuestic.dev

Official Discord Server

Ask questions at the official community discord server

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

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

Edge
Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
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: check out our contribution guides , open issues and discord server

Can I hire you guys?

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

Awards

By @flatlogic marketplace

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
🚀🚀🚀Vue3,Vue3.0,Vue,Vue3.x,Vuex,Typescript,TSX,ts,vue后台管理,admin,vue-admin,vue3-admin,vue-element-admin,iooc-admin,iooc-vue-admin主线版本基于element-plus、Typescript开发维护.集成CRUD,JsonSchema、大量节省业务代码.

iooc-admin(element-plus) 演示地址(数据库五分钟重置一次) ⚡️ vue3.x + element-plus + TypeScript ⚡️ vue3.x + element-plus + TypeScript (视频) 项目地址 ⚡️ vue3.x + element-pl

Jacking 51 Jun 20, 2021
Nuxt + CoreUI Free Vue Bootstrap Admin TemplateNuxt + CoreUI Free Vue Bootstrap Admin Template

Nuxt + CoreUI Free Vue Bootstrap Admin Template Nuxt + CoreUI Free Vue Bootstrap Admin Template Description Nuxt + CoreUI Free Vue Bootstrap Admin Tem

null 4 Apr 29, 2022
Free and Beautiful Vue 3 Admin Template

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

Epicmax 8.9k Oct 1, 2022
soybean admin - a beautiful vue admin template, based on Vue3、Vite、Naive UI、TypeScript.

soybean admin - a beautiful vue admin template, based on Vue3、Vite、Naive UI、TypeScript.

Soybean 1.5k Oct 6, 2022
A free and beautiful Quasar template for CRM needs built with vue.js

Quasar Admin CRM Template A free and beautiful Quasar template for CRM needs. This template also includes a variety of features that are required for

null 2 Sep 5, 2022
Vue3 admin,ant design vue pro,vue admin,vue vite admin,ant design pro

Ant Design Vue Pro An out-of-box UI solution for enterprise applications as a Vue boilerplate. based on Ant Design of Vue 基于 Vite2 Vue3 Ant-Design-of-

Ones 60 Sep 26, 2022
Micro front-end Admin based on Qiankun, vue3.x, admin-element-vue, admin-antd-vue project architecture

Micro front-end Admin based on Qiankun, vue3.x, admin-element-vue, admin-antd-vue project architecture

null 17 Sep 8, 2022
A free Vue admin dashboard template pack featuring a modern design system and lots of custom templates and components.

Shards Dashboard Vue A free Vue admin dashboard template pack featuring a modern design system and lots of custom templates and components. ✨ Note: Yo

DesignRevision 387 Oct 3, 2022
vue-pure-admin is a free and open source middle and back-end template.

vue-pure-admin is a free and open source middle and back-end template. Using the latest vue3, vite2, TypeScript, Element-Plus and other mainstream technology development, the out-of-the-box middle and back-end front-end solutions can also be used for learning reference.

啝裳 3.6k Sep 30, 2022
A Free And Open Source Admin Template Kit Using Vue And Vite

ABT:admin base template English | 中文 Introduction admin-base-template is a free and open source admin template kit. using vite2. Technology stack is V

Tech轩_ 7 Mar 31, 2022
Laputa IOT Platform Admin is a free and open source middle and back-end template.

Laputa IOT Platform Admin based in Vue3.0 typescript English | 中文 Introduction Laputa IOT Platform Admin is a free and open source middle and back-end

Sommer Jiang 3 Nov 29, 2021
Free Quasar Admin Template based on Vue.js and used Quasar Framework.

Free Quasar Admin Template based on Vue.js and used Quasar Framework.

Pratik Patel 568 Sep 27, 2022
Windzo a free open source dashboard admin template, using vue js and tailwind css framework

Windzo Dashboard Admin this dashboard app on development fork this repo for new commit update ?? Windzo is a free open source dashboard admin template

Mohammad Sahrullah 29 Sep 1, 2022
Nuxt version of Mazer - Free Bootstrap 5 Admin Dashboard Template and Landing Page

Mazer is a Admin Dashboard Template that can help you develop faster. Made with Bootstrap 5. No jQuery dependency.

Muhammad Fauzan 51 Sep 2, 2022
A Free Material Design Admin Template For Vue

Vue Material Admin English | 简体中文 About vuetify deveopment, please check my blog [http://isocked.com], (A vuepress theme made with vuetify) Plan and f

BigBeing 3 Oct 3, 2022
Free Vue.js Bulma Buefy Admin Dashboard Template

Admin One — Free Vue Bulma Buefy Dashboard Admin One is simple, beautiful and free Vue.js 2.x Buefy Bulma admin dashboard (SPA/PWA). Free under MIT Li

Viktor Kuzhelny 193 Sep 23, 2022
Vumin is a Free Admin Template built with Vue.js & Tailwind CSS.

Vumin is a Free Admin Template built with Vue.js & Tailwind CSS. Highlights SPA (Single Page Application) Reusable Components Vue Router & VueX Suppor

ScriptMint Solution 17 Aug 6, 2022
Production Ready, Carefully Crafted, Extensive Vuetifty Free Admin Template 🤩

Materio - Vuetify VueJS Free Admin Template Production ready carefully crafted most comprehensive admin template Introduction If you’re a developer lo

ThemeSelection 357 Sep 28, 2022
Free NuxtJs 3 + Vuetify3 Admin Dashboard Template

MaterialPro Free NuxtJs Admin Template is highly customizable and free dashboard template based on vuetify js. This template is based on Nuxt3 & Vuetify 3 based. so it is seo freindly + hybrid rendring + powerfull admin dashbaord template. it comes with handly features like table, charts, buttons, and profile example added. You can check the pro version of MaterialPro NuxtJs Admin Template for more details.

WrapPixel 7 Sep 29, 2022