Admin One — Free Vue 3 Tailwind 3 Admin Dashboard with dark mode
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
Small laptops 1024px
Small laptop layout with show/hide aside menu option
Laptops & desktops
Classic layout with aside menus on the left
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
- Create new repo with this template
- … or clone this repo on GitHub
- … or download .zip from GitHub
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
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.
- Make sure that you are using the latest version of the Dashboard. Issues for outdated versions are irrelevant
- Provide steps to reproduce
- Provide an expected behavior
- Describe what is actually happening
- Platform, Browser & version as some issues may be browser specific
Licensing
- Copyright © 2019-2021 JustBoil.me (https://justboil.me)
- Licensed under MIT
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 want to install the admin-one dashboard into my project now. Can someone please help?
can not run nuxtjs version
I convert project to nuxt withthis document but after that when I run project it's show this error without any other info:
ERROR Error while formatting vite error: { code: 'ERR_MODULE_NOT_FOUND' }
source code: https://github.com/MHKarami97/template
Changing @vue/cli-service": "^4.5.13 version in package.json , getting bellow error when running npm run install
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.
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 }) }
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;
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:
The solution is install module via npm:
npm install @tailwindcss/line-clamp --save-dev
How to fix this issue - stats.children: true
After running command - npm run dev, i got this warning alert below:
Any fix to this issue?
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.
Fix the vulnerabilities.
Upgrade the
package.json
to resolve vulnerabilities.Currently there is 70 vulnerabilities:
Ran
npm audit fix
andnpm audit fix --force
doesn't fix those vulnerabilities.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
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