Cheat Sheet Nuxt x Tailwindcss x NuxtUI

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)

"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

import tailwindcss from "@tailwindcss/vite";

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

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

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

edit nuxt config file

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

Nuxt Layout

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

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

Create a new file layouts/default.vue

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

Create a pages folder

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

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