Vitesse for Nuxt 3 By DKKs 👋🏻

🖥 DEMO 🖥

🖥 DEMO - SPA 🖥

☁ Try in the Cloud

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 Vue - Official 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