Free Vue.js 3 Tailwind CSS 3 admin dashboard template with dark mode. Vite & Vue CLI supported

  • By JustBoil.me
  • Last update: Jan 3, 2023
  • Comments: 11

Admin One — Free Vue 3 Tailwind 3 Admin Dashboard with dark mode

version license

Free Vue 3 Tailwind 3 admin dashboard

Admin One is simple, beautiful and free Vue.js 3.x Tailwind CSS 3.x admin dashboard.

  • Built with Vue.js 3, Tailwind CSS 3 framework & Composition API
  • Vite and Vue CLI build tools
  • SFC <script setup> Info
  • Dark mode
  • Styled scrollbars
  • SPA with Vuex & Router
  • Production CSS is only 34kb
  • Reusable components
  • Free under MIT License
  • Premium version available

Table of Contents

Responsive layout

Mobile & tablet

Mobile layout with hidden aside menu and collapsable cards & tables

Free Vue 3 Tailwind CSS 3 admin dashboard

Small laptops 1024px

Small laptop layout with show/hide aside menu option

Free Vue 3 Tailwind CSS 3 admin dashboard

Free Vue 3 Tailwind CSS 3 admin dashboard

Laptops & desktops

Classic layout with aside menus on the left

Free Vue 3 Tailwind CSS 3 admin dashboard

Demo

Free Dashboard Demo

https://justboil.github.io/admin-one-vue-tailwind/

Premium Dashboard Demo

https://tailwind-vue.justboil.me/

Quick Start

Get code & install. Then use either Vue CLI or Vite builds.

Get code & install

Get the repo

Install

cd to project's dir and run npm install

Vue CLI builds

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Vite builds

Vite is next Generation Frontend Tooling featuring unbundled web-development

Hot-reloads for development

npm run dev

Builds and minifies for production

npm run build:vite

Serves recently built app

npm run serve:vite

Linting

Lint

npm run lint

Lints and fixes files

npm run lint:fix

Browser Support

We try to make sure Dashboard works well in the latest versions of all major browsers

Chrome Firefox Edge Safari Opera

Reporting Issues

JustBoil's free items are limited to community support on GitHub.

The issue list is reserved exclusively for bug reports and feature requests. That means we do not accept usage questions. If you open an issue that does not conform to the requirements, it will be closed.

  1. Make sure that you are using the latest version of the Dashboard. Issues for outdated versions are irrelevant
  2. Provide steps to reproduce
  3. Provide an expected behavior
  4. Describe what is actually happening
  5. Platform, Browser & version as some issues may be browser specific

Licensing

Useful Links

Github

https://github.com/justboil/admin-one-vue-tailwind

Comments(11)

  • 1

    How to install with Laravel Inertia Stack??

    Hi, I'm sry if this is a noob question.

    I've just got into the Laravel Inertia Stack. I'm trying to create a template which I can use in my future projects.

    • I created a new project with laravel 9. I installed Laravel Breeze with vue option.
    • I then made an admin side, using laravel breeze templates and have made sure all the functionalities (Login/Logout, forget password, etc) are working.
    • The structure is
    • ~/resources/js/Pages/Backend/ contains all the backend pages
    • ~/resources/js/Pages/Frontend/ contains all the frontend pages
    • ~/resources/js/Pages/Components/ contains all the individual components

    I want to install the admin-one dashboard into my project now. Can someone please help?

  • 2

    can not run nuxtjs version

  • 3

    Changing @vue/cli-service": "^4.5.13 version in package.json , getting bellow error when running npm run install

    npm run serve

    [email protected] serve C:\Users\NarayanaReddyAnnapur\git\Digi\digihome-ui vue-cli-service serve

    INFO Starting development server... WARN A new version of sass-loader is available. Please upgrade for best experience. 98% after emitting CopyPlugin

    ERROR Failed to compile with 1 error 7:11:19 PM error in ./src/css/main.css

    Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8. Migration guide for end-users: https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

    @ ./src/css/main.css 4:14-162 15:3-20:5 16:22-170 @ ./src/main.js @ multi (webpack)-dev-server/client?http://192.168.0.6:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

    Could you please help on this issue , thank you in Advance. 1

  • 4

    The requested module '/node_modules/.vite/vue.js?v=6e305727' does not provide an export named 'default'

    when using Axios intercept request and response-interceptors api request like below

    import network from './request.js' export const UserLogin = (data) => { return network({ url: '/opt', method: 'post', data }) }

  • 5

    ReferenceError: RouterLink is not defined in NavBarItem.vue in Laravel integration

    When following the Laravel 9 integration guide, you get this error:

    Uncaught (in promise) ReferenceError: RouterLink is not defined at ReactiveEffect.fn (NavBarItem.vue:26:5) at ReactiveEffect.run (reactivity.esm-bundler.js:185:25) at get value [as value] (reactivity.esm-bundler.js:1147:39) at unref (reactivity.esm-bundler.js:1053:29) at Object.get (reactivity.esm-bundler.js:1056:37) at Proxy._sfc_render (NavBarItem.vue:97:10) at renderComponentRoot (runtime-core.esm-bundler.js:888:44) at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5600:57) at ReactiveEffect.run (reactivity.esm-bundler.js:185:25) at instance.update (runtime-core.esm-bundler.js:5714:56)

    The solution is change line 26 of "resources/js/Components/NavBarItem.vue" replacing "RouterLink" component from vue-router module with "Link" component form inertia-vue3 module.

    resources/js/Components/NavBarItem.vue 26 - return RouterLink; 26 + return Link;

  • 6

    Missing module "@tailwindcss/line-clamp" in Laravel integration

    When following the Laravel 9 integration guide, you get this error:

    Cannot find module '@tailwindcss/line-clamp'

    Require stack:

    • /home/tommaso/Progetti/Www/app.mezzanato.it/www/tailwind.config.js
    • /home/tommaso/Progetti/Www/app.mezzanato.it/www/node_modules/tailwindcss/lib/lib/setupTrackingContext.js
    • /home/tommaso/Progetti/Www/app.mezzanato.it/www/node_modules/tailwindcss/lib/index.js
    • /home/tommaso/Progetti/Www/app.mezzanato.it/www/postcss.config.js Plugin: vite:css File: /home/tommaso/Progetti/Www/app.mezzanato.it/www/resources/css/main.css at Module._resolveFilename (node:internal/modules/cjs/loader:955:15) at Module._load (node:internal/modules/cjs/loader:803:27) at Module.require (node:internal/modules/cjs/loader:1021:19) at require (node:internal/modules/cjs/helpers:103:18) at Object. (/home/tommaso/Progetti/Www/app.mezzanato.it/www/tailwind.config.js:82:9) at Module._compile (node:internal/modules/cjs/loader:1119:14) at Module._extensions..js (node:internal/modules/cjs/loader:1173:10) at Module.load (node:internal/modules/cjs/loader:997:32) at Module._load (node:internal/modules/cjs/loader:838:12) at Module.require (node:internal/modules/cjs/loader:1021:19)

    The solution is install module via npm:

    npm install @tailwindcss/line-clamp --save-dev

  • 7

    How to fix this issue - stats.children: true

    After running command - npm run dev, i got this warning alert below:

    3 WARNINGS in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
    webpack compiled with 3 warnings
    

    Any fix to this issue?

  • 8

    The engine "node" is incompatible with this module. Expected version "8 || 10 || 12 || 14 || 16 || 17". Got "18.0.0"

    $ yarn yarn install v1.22.18 info No lockfile found. [1/4] Resolving packages... [2/4] Fetching packages... error @achrinza/[email protected]: The engine "node" is incompatible with this module. Expected version "8 || 10 || 12 || 14 || 16 || 17". Got "18.0.0" error Found incompatible module. info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

  • 9

    Fix the vulnerabilities.

    Upgrade the package.json to resolve vulnerabilities.

    Currently there is 70 vulnerabilities:

    120 packages are looking for funding
      run `npm fund` for details
    
    70 vulnerabilities (57 moderate, 13 high)
    
    To address issues that do not require attention, run:
      npm audit fix
    
    Some issues need review, and may require choosing
    a different dependency.
    
    Run `npm audit` for details.
    

    Ran npm audit fix and npm audit fix --force doesn't fix those vulnerabilities.

  • 10

    Suggestion: Make use of .env for configuration

    First of all, thank you for an awesome template. It would be nice if we could make use of .env files for some configurations such as default document title etc. All that is need to do is make sure they are saved as VITE_ in a .env file as per documenation

  • 11

    vue router prefix #

    Hi everyone I have a problem about vue router prefix which contain # on the route. I need to integrate with a call back service which only allow url without# how do I get rid of # prefix ?

    eg. http://localhost:8080/#/

    http://localhost:8080/?code=VhLquPYa70tCmdvdoW87hm&state=638700c043d95e002feaeed0#/

    I can not get the params from the route