Shadcn Vue Admin

中文

Forked from shadcn-admin

Admin Dashboard UI crafted with Shadcn-vue, Vue3 and Vite. Built with responsiveness and accessibility in mind.

This is not a starter project (template) though. More components will be added later.

Features

• Light/Dark Mode
• Global Search Command
• shadcn-ui sidebar
• 8+ pages
• some custom components
• auto generate routes

Tech Stack

ui:

• inspira-ui
• shadcn-vue

Build Tool:

• Vite

State Management:

• pinia
• persistedstate

Styling:

• Tailwind CSS

Unplugins:

• Auto Import
• Components
• vite-plugin-pages [Deprecation]
• unplugin-vue-router
• Vite Plugin Vue Layouts
• Vite Plugin Vue Devtools

Icons:

• Lucide

Linting:

• ESLint
• antfu/eslint-config

Charts:

• vue-chrts

If you use tailwindcss v4, shadcn-vue charts is 'Legacy'. We now use this library instead.

Run locally

clone the project

git clone https://github.com/Whbbit1999/shadcn-vue-admin.git

Go to the project directory

cd shadcn-vue-admin

Install dependencies

pnpm install

Start the development server

pnpm dev

Author

Created by Whbbit, Design by shadcn-admin

Tips

Theme Customization

If you need to change the website style, you can use the preset styles provided by tweakcn. You only need to copy the css variables provided by tweakcn to index.css and change the :root :dark and @theme inline parts.

No index.vue in nested directories and don't want to use the default layout

For example, I don't want the pages in the pages/errors/ and pages/auth/ folders to use the default layout. I need to create a file in pages/ with the same name as the directory, src/pages/errors.vue src/pages/auth.vue, with the following file contents.

<template>
  <router-view />
</template>

<route lang="yml">
  meta:
    layout: false # This is the layout you want. I use false here to indicate that it does not need layout components.
</route>

This will result in an extra route being generated. In this example, if you follow the above steps, redundant /error/ and /auth/ routes will be generated, and these two pages will be blank pages. If you don't need them and there is no index.vue in the directory, you can create an index.vue file in the directory and redirect it to any page. I redirect it to /errors/404 here, you can handle it according to your situation. The content of the index.vue file is as follows:

<script lang="ts" setup>
const router = useRouter()
router.replace({ name: '/errors/404' })
</script>

License

MIT