Vitesse for Nuxt 3 By DKKs 👋🏻

🖥 DEMO 🖥

Or try edit on Stackblitz

Or CodeSandbox

Features

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

• ⚡️ Vite - Instant HMR

• 🎨 TailwindCSS - A utility-first CSS framework packed.

• 😃 Thousands of icons, one unified framework, powered by iconify

• 🔥 The <script setup> syntax

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

• 📑 Layout system

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

• 🏎 Zero-config cloud functions and deploy

• 🦾 TypeScript, of course

• 🩻 Nuxt Devtools npx nuxi@latest devtools enable

• 📱 Nuxtr Use nuxt commands with a few clicks.

• 🌐 i18n Internationalization for Nuxt Applications. see ./locales

Plugins

Nuxt Modules

• VueUse - collection of useful composition APIs.
• ColorMode - dark and Light mode with auto detection made easy with Nuxt.
• 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).

• Nuxtr An extension offering commands and tools to make your experience with Nuxt.js more pleasant.

Dev tools

Improve your DX, finding bugs, tracking data flow and pinia

• Vue Devtool
• Nuxt Devtools npx nuxi@latest devtools enable

Variations Original

• 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

GitHub Template

Create a repo from this template on GitHub.

for original Create a repo from this template on GitHub.

After fork this

Development

pnpm i
pnpm dev

Environment Variables and Multiple Environments.

For multiple environments can use .env and .env.prod or .env.whatever

example :

1. create .env and .env.prod in root of project.

• .env

WHAT_ENV="env_dev"

• .env.prod

WHAT_ENV="env_prod"

2. Add to nuxt.config.ts runtimeConfig -> public in this case will expose your env. for private or secret please read https://nuxt.com/docs/guide/going-further/runtime-config

  ...,
  runtimeConfig: {
    public: {
      WHAT_ENV: process.env.WHAT_ENV || 'env_dev'
    }
  },
  ...

3. Use in project by composables.

<script setup lang="ts">
const config = useRuntimeConfig()
const whatEnv = config.public.WHAT_ENV
</script>

<template>
  <div> {{ whatEnv }} </div>
</template>

4. run this command.

pnpm run start:dev
## equal (=)
nuxi dev --dotenv .env

or

pnpm run start:prod
## equal (=)
nuxi dev --dotenv .env.prod

Deployment

full documentation

Mode	(ssr) nuxt.config.ts	command	multiple environment
SSR	true	pnpm build	pnpm build --dotenv .env.prod
SPA	false	pnpm generate	pnpm generate --dotenv .env.prod
SSG	true	pnpm generate	pnpm generate --dotenv .env.prod

For SSR (server-side rendering)

pnpm build

For SPA (single page application)

• nuxt.config.ts

{
    ... ,
    ssr: false,
    ... ,
}

then

pnpm generate

For SSG (static site generation)

• nuxt.config.ts

{
    ... ,
    ssr: true,
    ... ,
}

then

pnpm generate

Docker

If you use Docker for standalone server

I already create Dockerfile and docker-compose.yml for easy deployment in (SSR Mode)

SPA, SSG please comment pnpm run build and uncomment RUN pnpm run generate

• Dockerfile

# build the project
# RUN pnpm run build
# for spa and ssg
RUN pnpm run generate

easy to use via run ./deploy-prod.sh file (Linux or Mac OS). For windows ./deploy-prod.bat

or use inline command like this

docker-compose down && docker-compose up -d --build && docker image prune --force --filter "dangling=true"

I don't like pnpm 😵

You can use npm or yarn to new package manager for this project 👍 .

1. search all 'pnpm' keyword in project then remove all code and config.

2. try npm install && npm run dev or yarn install && yarn dev

3. deploy for ssr npm run build or yarn build and for csr, ssg npm run generate or yarn generate

Update nuxt version by yourself 📈

npx nuxi upgrade --force

if version can't change

Update package.json (pnpm example)

pnpm update nuxt

then

npx nuxi upgrade --force

for clean your lock file and node_modules.

** Nuxt Version Here

latest version:

Clone to local

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

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