Nuxt Template: Wave

Nuxt Wave is an opinionated Nuxt 4 starter template with built-in support for Nuxt UI, Tailwind CSS, and Prettier.

Using create nuxt@latest provides everything you need to create a basic Nuxt application. However, it is missing a few useful items that you might find yourself manually adding to every new Nuxt project. The Wave template was created to automatically include these items. This provides a great starting point for a new Nuxt project with Nuxt UI and Tailwind.

The template includes:

• An initial Nuxt 4 project structure
• Nuxt UI 4
  • Integrates with Tailwind CSS
  • Integrates with Nuxt Icon
  • Integrates with Nuxt Fonts
  • Integrates with Nuxt Color Mode
  • Integrates with Nuxt Content
• Prettier
• Initial elements for language and title set in nuxt.config.ts
• A default main.css file
• An opinionated Nuxt UI color theme set in app.config.ts
• Default .vscode files for Prettier and Tailwind CSS settings and recommended extensions
• The dev script set to "nuxt dev -o"

Deployment Methods

bun

bunx giget gh:smart-ace-designs/nuxt-wave project-name

npm

npx giget gh:smart-ace-designs/nuxt-wave project-name

Project Structure

After deploying the Nuxt Wave template you will see the following files and directories in your project root:

/
├── .vscode/
│   ├── extensions.json
│   └── settings.json
├── app/
│   ├── assets/
│   │   └── css
│   │       └── main.css
│   ├── pages/
│   │   └── index.vue
│   ├── app.config.ts
│   └── app.vue
├── public/
│   ├── favicon.ico
│   └── robots.txt
├── .gitignore
├── .prettierrc
├── nuxt.config.ts
├── package.json
├── README.md
└── tsconfig.json