Cheat Sheet Nuxt x Tailwindcss x NuxtUI

development

Init NuxtJS

Docs: https://nuxt.com/docs/getting-started/installation

npm create nuxt <project-name>
 Which package manager would you like to use?
npm

 Initialize git repository?
Yes
 Initializing git repository...

 Would you like to install any of the official modules?
 @nuxt/content The file-based CMS with support for Markdown, YAML, JSON
 @nuxt/eslint Project-aware, easy-to-use, extensible and future-proof ESLint integration
 @nuxt/fonts Add custom web fonts with performance in mind
 @nuxt/icon Icon module for Nuxt with 200,000+ ready to use icons from Iconify
 @nuxt/image Add images with progressive processing, lazy-loading, resizing and providers support
 @nuxt/scripts Add 3rd-party scripts without sacrificing performance
 @nuxt/test-utils Test utilities for Nuxt
 @nuxt/ui The Intuitive UI Library powered by Reka UI and Tailwind CSS

Preventing Yarn (Allow only NPM)

# package.json
"engines": {
"yarn": "Please use NPM!",
"node": "22.x",
"npm": ">=6"
},

# shell
echo "22" > .nvmrc
echo "engine-strict=true" > .npmrc

Install Tailwindcss Version 4

Docs: https://tailwindcss.com/docs/installation/framework-guides/nuxt

npm install tailwindcss @tailwindcss/vite

edit

# nuxt.config.ts

import tailwindcss from "@tailwindcss/vite";

export default defineNuxtConfig({
    ...
    vite: {
        plugins: [ tailwindcss(), ],
    },
});

create tailwindcss config file mkdir -p assets/css touch assets/css/main.css

# main.css

@import "tailwindcss";
@import "@nuxt/ui";

edit nuxt config file

# nuxt.config.ts

export default defineNuxtConfig({
    ...
    css: ['~/assets/css/main.css'],
});

Nuxt Layout

Docs: https://nuxt.com/docs/guide/directory-structure/layouts

# app.vue

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

create new file layouts/default.vue

# layouts/default.vue

<template>
  <div>
    <p>Some default layout content shared across all pages</p>
    <slot />
  </div>
</template>

create pages folder

# pages/login/index.vue

<template>
  <div>Login Page</div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'no-auth',
})
</script>