Celeris Web

Celeris Web is a highly performant and customizable front-end development template built with Vue 3, Vite, and TypeScript. It features the latest syntax, components and APIs auto importing, state management, Chinese font presets, internationalization, and integration with OpenAI's ChatGPT API.
Alternatives To Celeris Web
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Vue Element Admin85,50046 days ago7August 08, 20201,332mitVue
:tada: A magical vue admin https://panjiachen.github.io/vue-element-admin
2 months ago13apache-2.0Java
eladmin jpa 版本:项目基于 Spring Boot 2.6.4、 Jpa、 Spring Security、Redis、Vue的前后端分离的后台管理系统,项目采用分模块开发方式, 权限控制采用 RBAC,支持数据字典与数据权限管理,支持一键生成前后端代码,支持动态路由
Gin Vue Admin19,449
3 days ago35October 10, 202329apache-2.0Go
Litemall18,44924 months ago1April 25, 202031mitJava
又一个小商城。litemall = Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端
Iview Admin15,93592 years ago206September 04, 2019611mitVue
Vue 2.0 admin management system template based on iView
Vue Admin Better15,698
13 hours ago1February 28, 202315mitVue
🚀🚀🚀vue admin,vue3 admin,vue3.0 admin,vue后台管理,vue-admin,vue3.0-admin,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus,vue admin plus,vue admin pro
Vue Pure Admin12,332
2 hours ago1May 12, 20226mitVue
🔥 全面ESM+Vue3+Vite+Element-Plus+TypeScript编写的一款后台管理系统(兼容移动端)
Mall Admin Web11,363
16 days ago37apache-2.0Vue
mall-admin-web是一个电商后台管理系统的前端项目,基于Vue+Element实现。 主要包括商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等功能。
Ant Design Vue Pro10,454
7 months ago193mitVue
👨🏻‍💻👩🏻‍💻 Use Ant Design Vue like a Pro! (vue2)
Newbee Mall10,418
5 months agogpl-3.0Java
🔥 🎉newbee-mall是一套电商系统,包括基础版本(Spring Boot+Thymeleaf)、前后端分离版本(Spring Boot+Vue 3+Element-Plus+Vue-Router 4+Pinia+Vant 4) 、秒杀版本、Go语言版本、微服务版本(Spring Cloud Alibaba+Nacos+Sentinel+Seata+Spring Cloud Gateway+OpenFeign+ELK)。 前台商城系统包含首页门户、商品分类、新品上线、首页轮播、商品推荐、商品搜索、商品展示、购物车、订单结算、订单流程、个人订单管理、会员中心、帮助中心等模块。 后台管理系统包含数据面板、轮播图管理、商品管理、订单管理、会员管理、分类管理、设置等模块。
Alternatives To Celeris Web
Select To Compare

Alternative Project Comparisons

Celeris Web

celeris-web - free and open-source front-end development framework
English | 简体中文


Celeris Web is a free and open-source front-end development framework that utilizes the latest technologies, including Vue 3, Vite, and TypeScript. Its monorepo approach makes it easy to manage dependencies and collaborate on multiple projects, providing developers with a comprehensive solution for building modern web applications.

One of the standout features of Celeris Web is its integration with OpenAI's ChatGPT API, which provides access to powerful natural language processing capabilities. This integration allows developers to easily incorporate natural language processing into their applications, making it an ideal choice for projects that require this functionality.

Whether you're a seasoned developer or just starting out, Celeris Web offers a streamlined front-end development process that leverages the latest tools and techniques.

Get started with celeris-web today and experience a highly streamlined front-end development process that harnesses the power of the latest technologies, including cutting-edge natural language processing capabilities.


Coding Style

Recommended IDE Setup

packages dependency relationship

 graph TD
   admin --> admin-api
   admin --> ai-core
   admin --> assets
   admin --> ca-components
   admin --> components
   admin --> constants
   admin --> directives
   admin --> hooks
   admin --> locale
   admin --> request
   admin --> styles
   admin --> types
   admin --> utils
   components --> assets
   components --> ca-components
   components --> constants
   components --> styles
   components --> types
   components --> utils
   ca-components --> constants
   ca-components --> utils
   directives --> utils
   hooks --> types
   locale --> constants
   locale --> types
   locale --> utils
   request --> constants
   request --> locale
   request --> types
   request --> utils
   types --> constants
   utils --> types
   admin-api --> constants
   admin-api --> types
   ai-core --> constants
   ai-core --> types

To update the diagram above edit the README file and open a new PR with the changes.

Bilingual Comments in Code

In the design of Celeris Web, we emphasize the readability and learnability of the code. To achieve this, each function is equipped with bilingual comments in both Chinese and English, ensuring that developers, regardless of their native language, can easily understand and learn from the code.

Why Choose Bilingual Comments?

  1. Global Collaboration: In multicultural teams, bilingual comments foster better communication and collaboration, ensuring that team members can accurately comprehend the functionality and implementation of the code.

  2. Convenient Learning: For beginners, bilingual comments provide a more user-friendly learning environment, aiding them in quickly grasping the logic and structure of the code.

  3. Developer-Friendly: We are committed to creating a developer-friendly environment, and bilingual comments are a crucial measure we've taken to achieve this goal.


    * 打开一个新的浏览器窗口
    * Open a new browser window
    * @param {string} url - 要在新窗口中打开的 URL
    * The URL to open in the new window
    * @param {object} options - 打开窗口的选项
    * Options for opening the window
    * @param {string} options.target - 新窗口的名称或特殊选项,默认为 "_blank"
    * @param {string} options.features - 新窗口的特性(大小,位置等),默认为 "noopener=yes,noreferrer=yes"
   export function openWindow(url: string, { target = "_blank", features = "noopener=yes,noreferrer=yes" }: {
     target?: "_blank" | "_self" | "_parent" | "_top"; // 新窗口的名称或特殊选项,默认为 "_blank"
     features?: string; // 新窗口的特性(大小,位置等),默认为 "noopener=yes,noreferrer=yes"
   } = {}) {
     window.open(url, target, features);

Through these bilingual comments, we aim to provide developers with a more enjoyable and efficient coding experience, making Celeris Web a frontend template that is truly easy to pick up and dive into.

Benefits of Monorepo Design

1. Easier Dependency Management: Monorepo centralizes the management of dependencies for all projects, avoiding version conflicts between different projects and making overall dependency management clearer and simpler.

2. Code Sharing and Reusability: Different projects can easily share and reuse code, reducing the workload of redundant development. This is highly beneficial for maintaining code consistency and improving development efficiency.

3. Unified Build and Deployment: Monorepo simplifies the entire development process through a unified build and deployment workflow, reducing the complexity of configuration and management and enhancing collaboration efficiency within the development team.

4. Unified Version Control: With all projects in the same version control repository, version management becomes more consistent and controllable. This helps the team better track and handle version-related issues. The Monorepo design positions Celeris Web not only as an admin system template but also as a frontend web template for rapidly developing C-end products. With Celeris Web, the journey of frontend development becomes even more relaxed and enjoyable! 🚀

Design Philosophy: Breaking the Limits of Admin Management, Focusing on C-End User Experience

In the market, most frontend templates primarily cater to the needs of B-end users, providing powerful features and flexible interfaces for enterprise management systems (Admin). However, few templates consider the characteristics of C-end products in their design, and this is where Celeris Web innovates.

Breaking the Limits of Admin Management:

Traditional Admin management systems prioritize data display and business management, while C-end products emphasize user experience and visual appeal. Recognizing C-end users' demands for aesthetically pleasing interfaces and smooth interactions, Celeris Web not only offers robust backend management features but also focuses on elevating the frontend interface to a higher level of user satisfaction.

Focusing on C-End User Experience:

Celeris Web is not just a template for admin systems; it's a frontend web template that prioritizes the user experience for C-end products. We aim to break free from the constraints of traditional Admin systems by introducing innovative design principles, ensuring that C-end products presented on the frontend deliver an outstanding user experience.

Highlighted Features:

  • Stylish and Aesthetic UI Design: We prioritize visual aesthetics, utilizing modern design languages to make Celeris Web's UI not just a compilation of features but a visual feast that captivates C-end users.
  • User-Friendly Interaction Experience: Considering the habits and needs of C-end users, Celeris Web emphasizes interactive design. Through smooth animation effects and intuitive operations, users can experience unprecedented pleasure and convenience.
  • Customizable Themes for Personalization: Recognizing the diversity of C-end products, we provide a rich set of theme customization options, allowing each C-end project to have a unique appearance that perfectly aligns with personalized requirements.

With this unique design philosophy, Celeris Web strives to explore new possibilities in frontend development, injecting more vitality and creativity into C-end products. We believe that such innovation will garner widespread user recognition and contribute to higher product value. In the world of Celeris Web, frontend development transcends the confines of Admin systems, incorporating more exciting elements related to user experience.

Future Development Roadmap: Targeting AIGC, Leading the Transformation of Internet Products

With the rise of Artificial Intelligence and Graph Computing (AIGC) technologies, we have decided to shift the focus of Celeris Web's development towards driving the research and implementation of AIGC-related products. This strategic decision aims to align with the wave of transformation in internet products, paving the way for new possibilities in future technological innovation.

AIGC Technology Leading the Transformation:

The emergence of AIGC signifies a technological revolution in the internet industry, bringing about more intelligent and interactive experiences for products. Celeris Web will actively respond to this transformation, committed to providing developers with superior tools to facilitate the creation of forward-looking AIGC applications.

Development Focus on Templates:

In the later stages of development, Celeris Web will pay increased attention to the research and development needs of AIGC-related products. We will introduce more functional modules tailored for artificial intelligence, enabling developers to build exceptional AIGC applications more conveniently and efficiently.

Emphasis on Product Implementation:

In addition to technical research and development, we will strengthen support for the implementation of AIGC products. By providing comprehensive documentation, examples, and customized services, Celeris Web aims to assist developers in seamlessly integrating AIGC technology into their actual projects, achieving an organic fusion of technological innovation and business application.

Open Collaborative Ecosystem:

To promote the wider application of AIGC technology, Celeris Web will actively build an open collaborative ecosystem. Collaborating closely with outstanding AIGC technology providers and developer communities, we aim to collectively drive the development of AIGC technology, contributing to the flourishing ecosystem of internet products.

The future development of Celeris Web will revolve around AIGC, and we look forward to exploring, innovating, and leading the future of internet products together with developers. Through continuous efforts and innovation, Celeris Web will become a leader in the AIGC field, empowering developers to create more intelligent and engaging internet products.

Try it now!

GitHub Template

Create a repo from this template on GitHub.

Clone to local

npx degit kirklin/celeris-web my-vite-app
cd my-vite-app
pnpm i



Just run and visit http://localhost:8888

pnpm run dev


To build the App, run

pnpm run build

And you will see the generated file in dist that ready to be served.

Deploy on Netlify

Go to Netlify and select your clone, OK along the way, and your App will be live in a minute.

Docker Production Build

First, build the celeris-web image by opening the terminal in the project's root directory.

docker buildx build . -t celeris-web:latest

Run the image and specify port mapping with the -p flag.

docker run --rm -it -p 8080:80 celeris-web:latest
Popular Vue Projects
Popular Admin Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Admin Dashboard