Nuppets

Snippets

Never write the same code twice
Contribute
<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
<script setup lang="ts">
const value = ref(null)
</script>

<template>
  <UFileUpload v-model="value" class="w-96 min-h-48" />
</template>
UFileUpload
Create an input element to upload files with Nuxt UI.
!uploadFile
<script setup lang="ts">
import * as z from 'zod'
import type { FormSubmitEvent } from '@nuxt/ui'

const schema = z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'Must be at least 8 characters')
})

type Schema = z.output<typeof schema>

const state = reactive<Partial<Schema>>({
  email: undefined,
  password: undefined
})

const toast = useToast()

async function onSubmit(event: FormSubmitEvent<Schema>) {
  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
  console.log(event.data)
}
</script>

<template>
  <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
    <UFormField label="Email" name="email">
      <UInput v-model="state.email" />
    </UFormField>

    <UFormField label="Password" name="password">
      <UInput v-model="state.password" type="password" />
    </UFormField>

    <UButton type="submit">
      Submit
    </UButton>
  </UForm>
</template>
UForm
Create a form with built-in validation and submission handling with Nuxt UI.
!form
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