README.md

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 customized intlify i18n - set preferred language according to browser, and save user's preferred language to cookie.

• ⚡️ 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

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.

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 Graphql Playground: http://127.0.0.1:3000/api/playground

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