Vitesse for Nuxt 3

References:

• https://github.com/antfu/vitesse-nuxt3
• https://github.com/element-plus/element-plus-nuxt-starter
• https://github.com/bicouy0/nuxt3-urql
• https://github.com/newbeea/nuxt3-apollo-starter

🧪 Working in Progress

🖥 Online Preview

Features

• 💚 Nuxt 3 - SSR, ESR, File-based routing, components auto importing, modules, etc.

• 🌏 i18n, powered by @nuxtjs/i18n.

• ⚡️ Vite - Instant HMR

• 🎨 UnoCSS - The instant on-demand atomic CSS engine.

• 📦 Element Plus - Vue 3 UI component library.

• 😃 Use icons from any icon sets in Pure CSS, powered by UnoCSS.

• 🔥 The <script setup> syntax.

• 🍍 State Management via Pinia, see ./composables/user.ts.

• 📑 Layout system.

• 🛠 VueUse - collection of useful composition APIs

• 🐉 RxJS

• 📥 APIs auto importing - for Composition API, VueUse and custom composables.

• 🏎 Zero-config cloud functions and deploy.

• 🦾 TypeScript, of course.

• 📲 PWA with offline support and auto update behavior.

Plugins

Nuxt Modules

• VueUse - collection of useful composition APIs.
• ColorMode - dark and Light mode with auto detection made easy with Nuxt.
• UnoCSS - the instant on-demand atomic CSS engine.
• Pinia - intuitive, type safe, light and flexible Store for Vue.
• VitePWA - zero-config PWA Plugin for Nuxt 3.
• DevTools - unleash Nuxt Developer Experience.

IDE

We recommend using VS Code with Volar to get the best experience (You might want to disable Vetur if you have it).

Variations

• vitesse - Opinionated Vite Starter Template
• vitesse-lite - Lightweight version of Vitesse
• vitesse-nuxt-bridge - Vitesse for Nuxt 2 with Bridge
• vitesse-webext - WebExtension Vite starter template

Try it now!

Online

GitHub Template

Create a repo from this template on GitHub.

Clone to local

If you prefer to do it manually with the cleaner git history

npx degit antfu/vitesse-nuxt3 my-nuxt3-app
cd my-nuxt3-app
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm

Dev

npm run dev

Website: http://127.0.0.1:3000

Deploy

Normal server

build

npm run build

start

npm run start

Serverless(aws lambda) mode

Setup CDN

set cdnURL in nuxt.config.ts

build with lambda preset

npm run build:lambda

upload static files

upload .output/server/public/* to cdn (cdnURL)

custom domain (optional)

config customDomain in serverless.yml

custom:
  customDomain:
    http:
      domainName: xxx.yourdomain.com
      endpointType: regional
      certificateName: yourdomain.com
      createRoute53Record: true
plugins:
  - serverless-domain-manager

then

npm run serverless:domain

deploy

npm run serverless:deploy

then visit xxx.yourdomain.com