Time Nuxt3 Template

time-nuxt3-template is an open-source Nuxt3 boilerplate that pairs a backend admin dashboard with a frontend website, using Nuxt3, Element Plus, Axios, Vue3, Pinia, and MongoDB. The project is version 1.2.0, created by the developer 时光 (blog at timebk.cn), and is designed to let you focus on page development while handling common full-stack concerns like authentication, database CRUD, and layout.

What is time-nuxt3-template?

time-nuxt3-template is a full-stack Nuxt3 starter that includes both an admin panel and a public-facing frontend in one codebase. It takes a standard Nuxt3 project structure as its base and produces a runnable application with a three-level sidebar menu, breadcrumbs, route caching, and token-based login. A live admin preview is available at http://souti.timebk.cn/admin (account and password are both 1), and the Chinese-language documentation is hosted at http://souti.timebk.cn/doc.

Key Features

• Full-stack architecture — Frontend uses Nuxt3 + Vue3 + Element Plus + Pinia + Axios; backend uses MongoDB and provides generic database operations for paginated queries, full queries, inserts, deletes, and updates.
• Responsive admin UI — Element Plus components are adapted for mobile, making the admin panel usable on phones as well as desktops.
• Configurable route cache — Each route can be individually configured to cache or not, and a three-level sidebar menu plus breadcrumbs are included.
• Permission system — Button, route, and element-level permissions are implemented, alongside a complete admin login flow with token verification.
• SEO support — Pages need semantic tags (for example, a <Title>About Us</Title> component) to get proper SEO; the template does not inject meta tags automatically.
• Pinia persistence — Stores can be persisted to localStorage by setting persist: true in the store file.
• Auto-registered icons — Element Plus icons are automatically registered for use throughout the template.
• Ready-made composables and utilities — Frontend provides useTimeDate(), useAxios(), isMobile(), and useEcharts(); backend provides useToken(), useSaveError(), useMongodb(), useDbAdd(), useDbDel(), useDbSet(), and useDbQuery().

Who is it for?

• Nuxt3 developers who want a working admin + frontend scaffold with auth and database operations already wired.
• Full-stack developers who need MongoDB-backed CRUD endpoints and a token-authenticated admin panel without building from scratch.
• Indie makers who want to launch a content-managed website with an admin area that supports route-level permission and caching.

What can you do with time-nuxt3-template?

• Build an admin dashboard: Use the backend's generic useDbAdd, useDbDel, useDbSet, and useDbQuery methods to manage MongoDB collections directly from Nuxt server routes; the frontend already includes token login and permission checks.
• Create a responsive frontend site: The same Nuxt3 instance serves public pages with three-level navigation and optional route caching, adapting Element Plus components to mobile.
• Prototype a full-stack MVP: Use the integrated Pinia persistence and Axios wrappers to quickly add state management and API calls, then deploy with npm run build.

How does the template work?

After cloning the repository, run npm i to install dependencies, npm run dev for local development, and npm run build for production. The backend uses MongoDB and generic database utilities that take data and table names as arguments; token generation and validation are handled by useToken().

FAQ

Is the image upload functionality included?

The repository states that image upload and saving to the server is not feasible after building a Nuxt3 project because static files are compiled at build time and cannot be accessed at runtime. The author recommends using a third-party image API or writing a separate Express-based upload endpoint.

Does the template work with mobile devices?

Yes. The frontend adapts Element Plus components for mobile, and there is an isMobile() utility that checks navigator.userAgent to detect phone devices.

Are permissions limited to buttons only?

No. The template includes button, route, and element-level permission checks, plus a full admin login flow with token verification.

How does routing and caching behave?

Each route can be configured to cache individually, and the sidebar supports up to three levels of nesting with breadcrumb navigation.

What is the default database setup?

The backend is built on MongoDB, and the template provides a generic MongoDB configuration utility (useMongodb) plus wrapper methods for add, delete, update, and query operations.