Nuxt Starter Pack

Save your crucial time with our collection of Nuxt + Tailwind CSS setup for your project

Nuxt Starter Pack for Nuxt 3

Features

Nuxt v3 - SSR, ESR, File-based routing, components auto importing, modules, etc.

Vite - Next generation frontend tooling. It's fast!

Tailwindcss v4 - A utility-first CSS framework for rapid UI development.

@nuxt/icon - 200,000+ ready to use icons from iconify

Typescript, Don't worry about that. Put your interface once global. And import to anywhere

Pinia, The intuitive store for Vue.js. (./stores/numberCounter.ts)

VueUse - Collection of Essential Vue Composition Utilities

PWA - Zero Config PWA, Offline Support Behavior

VeeValidate - Painless Vue forms, Let's me take your pain 💪

Eslint - Press CMD + S let's eslint take your code to a Beauty Salon see this

Multi Language - Ship your websites around the world and make sure they are know your achievements

Plugins

• @nuxtjs/color-mode - Dark and Light mode with auto detection made easy with Nuxt 🌗

• @nuxtjs/i18n - I18n (Internationalization) module for your Nuxt project powered by Vue I18n.

• @pinia/nuxt - Type Safe, Extensible, and Modular by design. Forget you are even using a store.

• @vueuse/nuxt - Collection of Essential Vue Composition Utilities

• @nuxt/icon - The component, supporting Iconify, Emojis and custom components.

• @vite-pwa/nuxt - Zero-config PWA Plugin for Nuxt

Coding Style

• Use composition API with typescript lang <script lang="ts" setup>
• Linter by Eslint with @antfu/eslint-config

Tools

• VsCode Extensions

  • Eslint
  • i18n Ally
  • Iconify IntelliSense
  • Volar

Try it Now!

Create Repo from this template on Github

Clone to Local

npx degit The-Univuerse/nuxt-tailwind-starter-pack nuxt-tailwind
cd nuxt-tailwind

Setup

Setup Environment

cp env_example .env
# change the environment based on your project

NUXT_BASE_URL=your_base_url
NUXT_SITE_NAME=your_site_name

Make sure to install dependencies:

# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install

Development Server

Start the development server on http://localhost:3000:

# npm
npm run dev

# pnpm
pnpm dev

# yarn
yarn dev

# bun
bun run dev

Production

Build the application for production:

# npm
npm run build

# pnpm
pnpm build

# yarn
yarn build

# bun
bun run build

Locally preview production build:

# npm
npm run preview

# pnpm
pnpm preview

# yarn
yarn preview

# bun
bun run preview

Nuxt Minimal Starter

Look at the Nuxt documentation to learn more.

Check out the deployment documentation for more information.