# lux-ui, a Vuetify 3 admin template with the AI features left in

> lux-ui is a Vue 3 and Vuetify 3 admin dashboard template built with Vite and TypeScript, shipped with Pinia, vue-i18n, Firebase auth, charts, a rich text editor and a working OpenAI and Azure speech integration. It suits teams who want a finished admin shell to adapt rather than a component library, and its badge versions lag the dependencies it actually declares, which is worth checking before you pin it.

**yangjiakai/lux-ui** — Create the best admin based on Vue3.x, Vite5.x, TypeScript, Vuetify3.x, Chat GPT

- Repository: https://github.com/yangjiakai/lux-ui
- Website: https://lux.vuetify3.com/
- Stars: 681 · Forks: 139
- Language: Vue
- License: MIT
- Published: 2026-10-21 · Updated: 2026-10-21 · Language: en
- Canonical page: https://hysenlabs.com/projects/yangjiakai-lux-ui

## An admin application template rather than a component set

lux-ui is presented as an attempt at the best Vuetify 3 admin open source template, built on the themes of Vuetify with a clear project structure. The stated goal is to cover a wide range of common technical requirements and features while adding an AI assistant, with all pages adaptive across devices.

The distinction from a component library matters for what you get. This is a working application: a dashboard, a task board, a data table, a to-do page, a chat page, cards, colour and gradient pages, a login page and image pages, each with a preview screenshot in the README. You inherit pages that already exist, which is the expensive part of an admin UI to write from scratch, and you inherit their structure, which is the part you will have to unpick when the product needs to be different.

The stack is stated in the badges: Vue 3.2.47, Vuetify 3.1.13 and Vite 4.2.1, with TypeScript in the feature list. The dependency manifest in the repository is a different matter, since it declares vue ^3.4.36, vuetify ^3.6.14 and vite in the toolchain. The badges are static images and the manifest is what npm installs, so treat the manifest as the source of truth for versions.

The author also publishes sibling templates: SPA and Nuxt 3 full versions, an i18n variant, and simplified Chinese and Japanese versions of the readme, so the project is one entry in a family rather than a single artefact.

## Getting the project running with yarn and Vite

The quick start is a clone, an install and a dev server, and the README keeps it to four commands with no environment setup in between:

```bash
git clone https://github.com/yangjiakai/lux-admin-vuetify3.git
cd lux-admin-vuetify3
yarn install
yarn dev
```

Note that the clone URL points at the lux-admin-vuetify3 repository name, which is the name the commands use, while the repository you are reading is lux-ui. The package manifest names the package vuetify3-design at version 0.0.0, and the scripts run Vite directly: dev runs vite --mode dev, build runs vite build --base=/ --mode pro, and preview runs vite preview. Testing is Vitest, with a ui variant and a coverage script.

The mode flag is the detail that matters. There are .env.dev and .env.pro files in the repository root alongside .env.template, so a build for production and a dev server read different environment files, and the build hard-codes a base path of /. If you deploy under a subpath rather than at the domain root, that base value is the first thing to change.

There is also a Dockerfile.dev and a docker-compose.yml, and the compose file defines a dev service that mounts the working directory into /app, keeps node_modules in a named volume so the host install is not shadowed, publishes 8080, and runs npm run dev with NODE_ENV=development. The dev container is therefore a way to run the app without installing node on the host, not a different application.

## The four API keys the template expects you to supply

The template integrates with three external services and one Microsoft service, and the README documents the setup in a single short section. You find the .env.template file in the root directory, remove the .template suffix, and replace four values with your own keys: VITE_OPENAI_API_KEY, VITE_UNSPLASH_ACCESS_KEY, and VITE_GITHUB_CLIENT_ID, plus VITE_TTS_KEY and VITE_TTS_REGION for text to speech.

The README links the source of each: the OpenAI key from the OpenAI platform account keys page, the Unsplash key from the Unsplash applications page, the GitHub client id from the GitHub tokens settings, and the Azure text to speech credentials from the Microsoft speech site.

The VITE_ prefix is the signal here, since Vite only exposes variables carrying that prefix to client code. That means these values end up in the browser bundle rather than on a server, which is fine for a public Unsplash access key and a Firebase client id, and is exactly why an OpenAI secret key in a VITE_ variable is something to think about before you ship a public deployment. The template puts a chat page in the front end, and the key travels with it.

The presence of firebase-auth among the repository topics and Firebase auth among the features means the login page is wired to a Firebase project you configure yourself, which is a second set of credentials to set up before the authentication flow does anything useful.

## What the dependency list says about the page inventory

The package manifest is more informative about the feature set than the marketing copy is, because each dependency corresponds to a page or a capability.

The charting layer comes in pairs: echarts with vue-echarts, and apexcharts with vue3-apexcharts, which suggests two different chart pages rather than one. There is md-editor-v3 for markdown editing and @tiptap/vue-3 with starter-kit for rich text, and @vueup/vue-quill for a third editor, so three editing surfaces are present. Data display is handled by vue-virtual-scroller, a beta version of it, plus vue-waterfall-plugin-next and the masonry wall package for a waterfall layout, with vuedraggable for reordering and vue3-perfect-scrollbar for scrolling.

The AI side is the openai package and the Microsoft Cognitive Services speech SDK, which matches the ChatGPT and text-to-speech preview pages. Firebase auth appears in the topics rather than the manifest, and the Unsplash client is the unsplash-js package, used by the two image pages. Other odds and ends include moment for dates, focus-trap for modal behaviour, clipboard for copy actions, plantuml-encoder for diagram rendering, flag-icons for the country lists, vue3-lottie for animations and @formkit/auto-animate for list transitions.

State is handled by Pinia with pinia-plugin-persist, so store contents survive a reload, and internationalisation is vue-i18n. The component auto-importing and the TypeScript setup are configured through auto-imports.d.ts, vite.config.ts and tsconfig.json, and the styling runs through tailwind.config.js and postcss.config.js alongside Vuetify's own theming.

## Netlify deployment and the production Docker image

Two deployment paths are described, and they are configured with different files.

The first is Netlify, which the feature list calls zero-config, and the repository carries a netlify.toml. Vite is the build tool, so the build command is the manifest's build script and the output directory is the dist folder that the production Dockerfile also copies.

The second is Docker, and the Dockerfile is a two-stage build. The build stage starts from node:lts-alpine, copies package*.json, runs npm install, copies the rest of the tree and runs npm run build. The production stage starts from nginx:stable-alpine, copies the built dist directory into the nginx html root, exposes port 80 and runs nginx in the foreground. The compose file wires the app service to that Dockerfile and publishes port 80, while the dev service uses Dockerfile.dev separately.

That split is a reasonable production shape for a Vite single page application: the build toolchain stays in the build stage and never reaches the runtime image, and the runtime is a static file server. The trade-off is that every deployment is a static hosting decision, so anything needing a server side, a database or a real API gateway sits outside what this template provides.

## An MIT template with no releases and a live demo to compare against

The licence is MIT, which is what you want from a template you are going to modify heavily, and there is a LICENSE file in the repository root. There is also a Chinese document link for version 1.0 of the documentation, and readmes in English, Simplified Chinese and Japanese.

The repository has no GitHub releases at all, so the template is consumed by cloning or by depending on the repository directly rather than by pinning a published version. The last push to main was on 2026-10-09, so the tree is being worked on, and there is no tag to fall back to if an update breaks your build.

For evaluation, the live demo at lux.vuetify3.com is the fastest way to see the pages in motion before you clone anything, and the preview screenshots in the README cover the dashboard, task board, data table, to-do, chat, card, colour, gradient, login and image screens.

Two things to settle before you commit to it. The badge versions disagree with the manifest versions, so decide on the manifest. And the AI features ship wired to third-party services through browser-exposed keys, so if you do not want an OpenAI or Azure dependency in your product, that work is removal rather than configuration, and you would be starting from a template with a lot of pages you intend to delete.

## Conclusion

Adopt lux-ui if you want a complete admin dashboard shell in Vue 3 and Vuetify 3 that already includes charts, tables, a rich text editor, internationalisation and a working AI chat page, since those pages are the expensive part of building an admin UI. Do not adopt it as a design system or a library, because it is an application template whose pages you will rewrite, and do not expect the badges to tell you the dependency versions, since they disagree with the package manifest. Before you start, read the .env.template file and supply your own VITE_OPENAI_API_KEY, VITE_UNSPLASH_ACCESS_KEY, VITE_GITHUB_CLIENT_ID, VITE_TTS_KEY and VITE_TTS_REGION values, check that the Vuetify and Vite versions in package.json match what your own project expects, and note the last push was on 2026-10-09 with no GitHub releases, so pin your dependency and keep your own fork.

## FAQ

### How do I run the lux-ui admin template locally?

Clone the repository, run yarn install, then yarn dev. The dev script runs vite --mode dev, and the repository also ships a docker-compose dev service that mounts the working directory, keeps node_modules in a named volume, publishes 8080 and runs npm run dev.

### Which environment variables does lux-ui need?

You copy .env.template to a .env file and replace VITE_OPENAI_API_KEY, VITE_UNSPLASH_ACCESS_KEY, VITE_GITHUB_CLIENT_ID, and VITE_TTS_KEY and VITE_TTS_REGION with your own values. The repository also contains .env.dev and .env.pro, which the Vite dev and build modes read.

### Which versions of Vue, Vuetify and Vite does lux-ui use?

The README badges show Vue 3.2.47, Vuetify 3.1.13 and Vite 4.2.1, while the package.json declares vue ^3.4.36 and vuetify ^3.6.14. The manifest is what npm installs, so check it rather than the badge when pinning versions.

### How is lux-ui deployed in production?

The Dockerfile builds the app in a node:lts-alpine stage and serves the built dist directory from nginx:stable-alpine on port 80. A netlify.toml is also included for zero-config Netlify deployment, and the build script is vite build --base=/ --mode pro.

### What licence is lux-ui released under?

The project is MIT licensed, with a LICENSE file in the repository root. The repository publishes no GitHub releases, so the last push on 2026-10-09 is the only reference point for the current state of the code.

## Sources

- [Issues](https://github.com/yangjiakai/lux-ui/issues)
- [License: MIT](https://github.com/yangjiakai/lux-ui/blob/main/LICENSE)
- [Project website](https://lux.vuetify3.com/)
- [README](https://github.com/yangjiakai/lux-ui/blob/main/README.md)
- [yangjiakai/lux-ui on GitHub](https://github.com/yangjiakai/lux-ui)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/yangjiakai-lux-ui