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

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>