Nuxt Template: Wave

Nuxt Wave is an opinionated Nuxt 4 starter template with built-in support for Nuxt UI, Tailwind CSS, and Prettier. It also includes a simple Welcome component to showcase basic Nuxt UI functionality.

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 v4.1
  • 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 to properly handle Tailwind CSS, recommended extensions, and default Prettier formatters
• A simple Welcome component displayed from app.vue
• 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

Note

You should manually clear the contents of this README file after deployment.

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
│   ├── components/
│   │   └── App
│   │       └── Welcome.vue
│   ├── pages/
│   │   └── index.vue
│   ├── app.config.ts
│   └── app.vue
├── public/
│   ├── favicon.ion
│   └── robots.txt
├── .gitignore
├── .prettierrc
├── nuxt.config.ts
├── package.json
├── README.md
└── tsconfig.json