Snippets

Never write the same code twice

<script setup lang="ts">
{cursor}
</script>

<template>
  <Html lang="en">
    <Body>
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </Body>
  </Html>
</template>

<style scoped>

</style>

Basic Nuxt app.vue

Create a basic Nuxt app.vue

!app

const title = 'Your Page Title'
const description = 'Your page description'
const image = 'https://yoursite.com/og.png'
const url = 'https://yoursite.com'

useHead({
  titleTemplate: '%s | Your Site Name',
  meta: [
    { name: 'viewport', content: 'width=device-width, initial-scale=1.0' },
    { name: 'charset', content: 'utf-8' },
    { name: 'color-scheme', content: 'light dark' },
  ],
  link: [
    { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
    { rel: 'canonical', href: url },
  ],
})

useSeoMeta({
  title,
  description,
  ogTitle: title,
  ogDescription: description,
  ogImage: image,
  ogUrl: url,
  ogType: 'website',
  twitterCard: 'summary_large_image',
  twitterTitle: title,
  twitterDescription: description,
  twitterImage: image,
})

Complete SEO Setup

Configure SEO meta tags and technical metadata with useHead and useSeoMeta

!seo

::component-code{pro}
---
hide:
  - class
props:
  class: ''
---
::

Component Code

Extremely specific snippet to generate the code of a component in the Nuxt UI documentation (cc @BenjaminCanac)

!cc

export function use{clipboard}() {
  const {clipboard} = ref(null);

  return {
   {clipboard}
  };
}

Composable

Create a new Nuxt composable

!comp

const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('content').path(route.path).first()
})

Content Query Collection

Query all that stuff in your Nuxt Content collection !

!qc

icon: {
  customCollections: [
    {
      prefix: 'custom',
      dir: './app/assets/icons',
    },
  ],
  clientBundle: {
    scan: true,
    includeCustomCollections: true,
  }
},

Custom Icon Collection

Create a @nuxt/icon custom collection

!cic

const modelValue = defineModel({ required: true })

Define Model (two ways bindings)

Make a new model in a Vue component

!defmodel

---
title: New Article
description:
image:
date: {date}
tags:
  - announcement
authors:
  - name:
    description:
    to:
    target: _blank
    avatar:
      src:
      alt:
---

# New Article

New Nuxt Content Article

Create a new Nuxt Content article

!na

npx nuxi module add {cursor}

New Nuxt module

Install a new Nuxt module has never been so easy.

!nm

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

Nuxt UI Index CSS

Create a basic Nuxt UI index.css

!uiCss

import { H3Event } from "h3";

export default defineEventHandler(async (event: H3Event) => {
  const body = await readBody(event);
  {cursor}
});

Server Handler

Create a new Nuxt server handler

!sh

<script setup lang="ts">
defineProps<{
  test: string
}>()
</script>

<template>
  <div>
    Hello {{ test }}{cursor}
  </div>
</template>

<style scoped>

</style>

Single File Component

Create a new Vue component with script, template, and style

!sfc

npx nuxi init {cursor} --template v4-compat

Start a new Nuxt project

Create a new Nuxt project with Nuxi CLI

!np

<script setup lang="ts">
const items = ref([
  {
    label: 'Profile',
    icon: 'i-lucide-user'
  },
  {
    label: 'Billing',
    icon: 'i-lucide-credit-card'
  },
  {
    label: 'Settings',
    icon: 'i-lucide-cog'
  }
])
</script>

<template>
  <UDropdownMenu
    :items="items"
    :content="{
      align: 'start',
      side: 'bottom',
      sideOffset: 8
    }"
    :ui="{
      content: 'w-48'
    }"
  >
    <UButton label="Open" icon="i-lucide-menu" color="neutral" variant="outline" />
  </UDropdownMenu>
</template>

UDropdownMenu

Create a dropdown menu with Nuxt UI

!menuDropdown

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'green',
      neutral: 'neutral'
    }
  }
})

UI App Config

Generate the UI App Config for Nuxt UI Pro

!ac

<UModal>
  <UButton label="Open" color="neutral" variant="subtle" />

  <template #content>
    <UCard>
      <p>Hello World</p>
    </UCard>
  </template>
</UModal>

UModal

Create a modal with Nuxt UI

!modal

<script setup lang="ts">
const items = [
  {
    label: 'Guide',
    icon: 'i-lucide-book-open'

    },
  {
    label: 'Composables',
    icon: 'i-lucide-database'

  },
  {
    label: 'Components',
    icon: 'i-lucide-box',
    slot: 'components'
  }
]
</script>

<template>
  <UNavigationMenu :items="items" class="w-full justify-center">
    <template #components-trailing>
      <UBadge label="44" variant="subtle" size="sm" />
    </template>
  </UNavigationMenu>
</template>

UNavigationMenu

Create a navigation menu with Nuxt UI

!menuNavigation

<script setup lang="ts">
const items = ref([
  {
    label: 'Backlog',
    value: 'backlog'
  },
  {
    label: 'Todo',
    value: 'todo'
  },
  {
    label: 'In Progress',
    value: 'in_progress'
  },
  {
    label: 'Done',
    value: 'done'
  }
])
const value = ref('backlog')
</script>

<template>
  <USelect v-model="value" :items="items" class="w-48" />
</template>

USelect

Create a simple select with Nuxt UI

!select

<script setup lang="ts">
const items = ref([
  {
    label: 'Backlog'
  },
  {
    label: 'Todo'
  },
  {
    label: 'In Progress'
  },
  {
    label: 'Done'
  }
])
const value = ref({
  label: 'Todo'
})
</script>

<template>
  <USelectMenu v-model="value" :items="items" class="w-48" />
</template>

USelectMenu

Create a select menu with Nuxt UI

!menuSelect

<UTooltip text="Open on GitHub">
  <UButton label="Open" color="neutral" variant="subtle" />
</UTooltip>

UTooltip

Create a tooltip with Nuxt UI

!tooltip