Giter Club home page Giter Club logo

admin-one-vue-tailwind's Introduction

version license

Tailwind 3.x Vue 3.x with Vite or Nuxt or Laravel

Free Vue 3 Tailwind 3 admin dashboard with dark mode

Vue Tailwind white & dark styles

Tailwind 3.x Vue 3.x with Vite or Nuxt or Laravel

Admin One is simple, beautiful and free Vue.js 3.x Tailwind CSS 3.x admin dashboard. Nuxt 3.x or Laravel 9.x integrations available

  • Built with Vue.js 3, Tailwind CSS 3 framework & Composition API
  • Vite under the hood — Info
  • Nuxt 3 integration available — Info
  • Laravel Breeze Inertia Vue integration available — Info
  • SFC <script setup>Info
  • Pinia state library (official Vuex 5) — Info
  • Dark mode
  • Styled scrollbars
  • SPA with Router
  • Production CSS is only ≈38kb
  • Reusable components
  • Free under MIT License
  • Premium version available

Table of Contents

Looking for React TypeScript version?

This is Tailwind Vue dashboard version

Looking for Tailwind React TypeScript? Check Admin One - React TypeScript Tailwind dashboard version

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 dev or build with Vite or integrate with Nuxt or Laravel

Get code & install

Get the repo

Install

cd to project's dir and run npm install

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

Serves recently built app

npm run preview

Linting

Lint

npm run lint

Nuxt 3.x integration

This dashboard can be integrated with Nuxt 3.x. Check guide for more information

Laravel 9.x integration

This dashboard can be integrated with Laravel 9.x Breeze Inertia + Vue.js stack. Check guide for more information

Docs

Customization & info: https://justboil.github.io/docs/

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

admin-one-vue-tailwind's People

Contributors

mahmoud-eskandari avatar molayli avatar nisshan avatar vikdiesel avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

admin-one-vue-tailwind's Issues

There is no file store/layout.js

// Add layout store
import { useLayoutStore } from "@/Stores/layout.js";

I can't find the store/layout.js file. is there a file reference?

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.

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

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?

Style inconsistency with Laravel guide

When I follow this step in the Laravel guide I end up with an inconsistent style from demo.

image

To fix it, I keep the existing style

<component
      :is="item.route ? Link : 'a'"
      :href="itemHref"
      :target="item.target ?? null"
      class="flex cursor-pointer"
      :class="componentClass" <<<--- needs to stay like this not ':class="activeInactiveStyle"' as in the guide
      @click="menuClick"
    >

image

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.

White page on mobile device

I have insatlled this package inside a laravel app and it's works fine but when I tried to open my app on mobile I have a total white page !

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?

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

no content in dashboard

After I follow the laravel guide, it work with the login page, register page. But after the registration, nothing shows up in the /dashboard, and no errors, no logs.

in laravel 10 integration, the colors are not displayed.

image

when I want to integrate it with laravel 10, I follow all the steps and at the end many of the colors are not rendered.

I thought it could be tailwind so I updated all the npm packages but it keeps happening.

when i use tailwind outside of the normal template the colors work.

can anyone help me?

Maximum call stack size exceeded

jb-button without href or routeName it throws stack size exceeded error. Please help
i want
<jb-button
label="Save"
type="submit"
color="danger"

Loader

Is there any loader for wait in this

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;

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

Disable JbButton

I am trying to disable a button created by the JbButton using the disabled attribute component but it's not working.

Adding animation on dropdown

Hello first this is really great project and i want to help it to be more great do you think i can add simple animation for dropdown ?

Preserve dark mode setting is not working properly

Currently, the "preserve dark mode" setting is not working properly, even by uncommenting the required lines in main.js and darkMode.js
The reason is that the value used to set the darkMode key in darkMode.js::localStorage.setItem() should be this.isEnabled ? '1' : '0' instead of this.darkMode ? '1' : '0'.
Indeed, the darkMode ref does not exist.

// You can persist dark mode setting
// if (typeof localStorage !== 'undefined') {
// localStorage.setItem('darkMode', this.darkMode ? '1' : '0')
// }
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.