Celeris Web

Celeris Web is a free and open-source front-end development template built on Vue 3, Vite, and TypeScript, designed to accelerate the creation of both admin dashboards and customer-facing (C-end) web products.

What is Celeris Web?

Celeris Web is a monorepo-based front-end template that packages together an admin application, shared components, hooks, locale files, request utilities, styles, types, and utility functions. It runs on a development server at http://localhost:8888 and produces a static dist folder when built, deployable to Netlify or via Docker. The project is maintained by Kirklin on GitHub and has received 496 stars at the time of this writing. Its source code uses the new <script setup> syntax and offers bilingual Chinese-English comments on every function to support learning and collaboration.

Key Features

• Vue 3 + Vite + TypeScript — The template uses the latest Vue 3 with the <script setup> syntax, Vite as the build tool, and pnpm for package management.
• Monorepo with shared packages — Code is split into packages such as components, hooks, locale, request, styles, types, and utils, making dependencies easier to manage and reuse across projects.
• Automated imports — Components and APIs are imported automatically using unpluginVueComponents and unplugin-auto-import, reducing manual boilerplate.
• Routing and state management — Comes with Vue Router v4 for navigation, Pinia for state management, and NProgress for page-loading feedback.
• Internationalization and Chinese font preset — Includes a locale package ready for i18n and a UnoCSS preset for Chinese fonts.
• Deployment options — Zero-config deployment to Netlify is supported, and a Dockerfile is provided for production container builds via docker buildx build . -t celeris-web:latest.
• Bilingual comments — Every method is documented in both Chinese and English, making the code more accessible to a global contributor base.
• ChatGPT API integration — Repository metadata lists integration with OpenAI's ChatGPT API, enabling natural-language features in your frontend.

Who is it for?

• Frontend developers — who want a modern, type-safe boilerplate to start a Vue 3 project without manually configuring Vite, Pinia, Router, and auto-imports.
• Startups and product teams — that need to ship both an admin console and a polished user-facing web experience quickly; the template explicitly focuses on C-end user experience, unlike typical admin-only templates.
• Open-source contributors — who appreciate bilingual code comments and a modular monorepo layout that makes collaboration straightforward.
• Developers building AI-powered UIs — can leverage the stated OpenAI ChatGPT integration to add conversational or natural-language capabilities.

What can you do with Celeris Web?

• Build an admin dashboard — Use the admin package and the available routing, state management, and auto-imported components to scaffold a management interface.
• Create a customer-facing product page — Rely on the aesthetic UI design, customizable themes, and smooth interactions to launch a C-end website.
• Internationalize your application — Use the locale package to add multi-language support from the start.
• Deploy to production — Run pnpm run build to generate static assets in dist, or build the provided Docker image and run it with docker run --rm -it -p 8080:80 celeris-web:latest.

How does Celeris Web work?

The workflow starts by cloning the repository with npx degit kirklin/celeris-web my-vite-app, installing dependencies with pnpm i, and running pnpm run dev to start the development server at localhost:8888. For production, pnpm run build outputs a dist folder that can be served directly or deployed to Netlify in a few clicks. The template's monorepo structure keeps all shared packages in one place, so changes to a component or utility are reflected across the admin app and any other consuming project.

Pricing

Celeris Web is free and open-source. You can use it for personal or commercial projects, modify it, and contribute back through GitHub.

FAQ

Is Celeris Web free?

Yes, Celeris Web is a free and open-source project. The repository is publicly available under the GitHub template option, so you can create a new repo from it without cost.

What tech stack does Celeris Web use?

It uses Vue 3, Vite, TypeScript, pnpm, Vue Router v4, Pinia, NProgress, UnoCSS (with a Chinese font preset), and the repository metadata also lists Naive UI and OpenAI ChatGPT integration.

How do I start a new project with Celeris Web?

Use npx degit kirklin/celeris-web my-vite-app to clone the template, then run pnpm i and pnpm run dev. The dev server starts at http://localhost:8888.

Can I deploy Celeris Web to Netlify?

Yes, the template supports Netlify with zero configuration. Connect your repository to Netlify and it will build and deploy automatically.

Does Celeris Web support multiple languages?

Yes, the locale package provides internationalization support, and the codebase includes Chinese and English comments on functions to make the code bilingual.