nuxt ui link

<p class="text-sm text-muted">
  Suggestions:
  <ULink to="#">Account</ULink>,
  <ULink to="#">Support</ULink>,
  <ULink to="#">Account</ULink>
</p>

<p class="text-sm text-muted">
  Suggestions:
  <ULink to="#">Account</ULink>,
  <ULink to="#">Support</ULink>,
  <ULink to="#">Account</ULink>
</p>

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        colors: {
          primary: 'green' // Replace 'green' with your desired color
        }
      }
    })
  ]
})

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        colors: {
          primary: 'green' // Replace 'green' with your desired color
        }
      }
    })
  ]
})

<ULink raw to="#" class="text-primary hover:text-primary/75">Account</ULink>

<ULink raw to="#" class="text-primary hover:text-primary/75">Account</ULink>

  <NuxtImg
    src="/images/ui/support/decoration-right.png"
    alt="Right decoration"
    class="..."
  />
  

  <NuxtImg
    src="/images/ui/support/decoration-right.png"
    alt="Right decoration"
    class="..."
  />
  

[500] [IPX_ERROR] 
Something went wrong installing the "sharp" module

Cannot find module '../build/Release/sharp-win32-x64.node'
Require stack:
...
Possible solutions:
- Install with verbose logging and look for errors: "npm install --ignore-scripts=false --foreground-scripts --verbose sharp"
- Install for the current win32-x64 runtime: "npm install --platform=win32 --arch=x64 sharp"
- Consult the installation documentation: <https://sharp.pixelplumbing.com/install>

[500] [IPX_ERROR] 
Something went wrong installing the "sharp" module

Cannot find module '../build/Release/sharp-win32-x64.node'
Require stack:
...
Possible solutions:
- Install with verbose logging and look for errors: "npm install --ignore-scripts=false --foreground-scripts --verbose sharp"
- Install for the current win32-x64 runtime: "npm install --platform=win32 --arch=x64 sharp"
- Consult the installation documentation: <https://sharp.pixelplumbing.com/install>

   npm install --platform=win32 --arch=x64 sharp
   

   npm install --platform=win32 --arch=x64 sharp
   

   npm install --ignore-scripts=false --foreground-scripts --verbose sharp
   

   npm install --ignore-scripts=false --foreground-scripts --verbose sharp
   

export default defineNuxtConfig({
  routeRules: {
    '/support': { prerender: false },      // Do not prerender the /support index page
    '/support/**': { prerender: true },    // Prerender all child pages under /support
  }
})

export default defineNuxtConfig({
  routeRules: {
    '/support': { prerender: false },      // Do not prerender the /support index page
    '/support/**': { prerender: true },    // Prerender all child pages under /support
  }
})

npm install --platform=win32 --arch=x64 sharp

npm install --platform=win32 --arch=x64 sharp

npm install --ignore-scripts=false --foreground-scripts --verbose sharp

npm install --ignore-scripts=false --foreground-scripts --verbose sharp

<script setup lang="ts">
const { data: navigation } = await useAsyncData('navigation', () =>
  queryCollectionNavigation('legal') // You may want to combine navigation as well if needed
)

const { data: blogSections } = await useAsyncData('blog-search', () =>
  queryCollectionSearchSections('blog')
)
const { data: supportSections } = await useAsyncData('support-search', () =>
  queryCollectionSearchSections('support')
)
const { data: legalSections } = await useAsyncData('legal-search', () =>
  queryCollectionSearchSections('legal')
)

const files = computed(() => [
  ...(blogSections.value || []),
  ...(supportSections.value || []),
  ...(legalSections.value || []),
])

const searchTerm = ref('')
</script>
<template>
  <ClientOnly>
    <UContentSearch
      v-model:search-term="searchTerm"
      :files="files"
      shortcut="meta_k"
      :navigation="navigation"
      :links="links"
      :fuse="{ resultLimit: 42 }"
    />
  </ClientOnly>
</template>

<script setup lang="ts">
const { data: navigation } = await useAsyncData('navigation', () =>
  queryCollectionNavigation('legal') // You may want to combine navigation as well if needed
)

const { data: blogSections } = await useAsyncData('blog-search', () =>
  queryCollectionSearchSections('blog')
)
const { data: supportSections } = await useAsyncData('support-search', () =>
  queryCollectionSearchSections('support')
)
const { data: legalSections } = await useAsyncData('legal-search', () =>
  queryCollectionSearchSections('legal')
)

const files = computed(() => [
  ...(blogSections.value || []),
  ...(supportSections.value || []),
  ...(legalSections.value || []),
])

const searchTerm = ref('')
</script>
<template>
  <ClientOnly>
    <UContentSearch
      v-model:search-term="searchTerm"
      :files="files"
      shortcut="meta_k"
      :navigation="navigation"
      :links="links"
      :fuse="{ resultLimit: 42 }"
    />
  </ClientOnly>
</template>

legal: defineCollection({
  type: 'page',
  source: {
    include: 'legal/*.md',
    prefix: '/',
  },
}),

legal: defineCollection({
  type: 'page',
  source: {
    include: 'legal/*.md',
    prefix: '/',
  },
}),

  source: {
    include: ['legal/*.md', 'legal/.navigation.yml'],
    prefix: '/',
  }
  

  source: {
    include: ['legal/*.md', 'legal/.navigation.yml'],
    prefix: '/',
  }
  

  source: {
    include: 'legal/*.{md,yml}',
    prefix: '/',
  }
  

  source: {
    include: 'legal/*.{md,yml}',
    prefix: '/',
  }
  

<script setup lang="ts">
const useLink = ref(true) // or use a prop

// Optionally, you can use a computed property if you want more logic
const dynamicComponent = computed(() => useLink.value ? 'NuxtLink' : 'div')
</script>

<template>
  <component :is="dynamicComponent" to="/somewhere" v-if="useLink">
    Go somewhere
  </component>
  <component :is="dynamicComponent" v-else>
    Not a link
  </component>
</template>

<script setup lang="ts">
const useLink = ref(true) // or use a prop

// Optionally, you can use a computed property if you want more logic
const dynamicComponent = computed(() => useLink.value ? 'NuxtLink' : 'div')
</script>

<template>
  <component :is="dynamicComponent" to="/somewhere" v-if="useLink">
    Go somewhere
  </component>
  <component :is="dynamicComponent" v-else>
    Not a link
  </component>
</template>

<component :is="useLink ? 'NuxtLink' : 'div'" to="/somewhere">
  Go somewhere
</component>

<component :is="useLink ? 'NuxtLink' : 'div'" to="/somewhere">
  Go somewhere
</component>

const selectedTabIndex = computed({
  get() {
    const tabKey = chatPanelStore.activeTabKey || 'one'
    return chatTabs.value[tabKey]
  },
  set(tab) {
    chatPanelStore.setActiveTab(tab as ChatPanelTabKey)
  },
})

const selectedTabIndex = computed({
  get() {
    const tabKey = chatPanelStore.activeTabKey || 'one'
    return chatTabs.value[tabKey]
  },
  set(tab) {
    chatPanelStore.setActiveTab(tab as ChatPanelTabKey)
  },
})

const selectedTab = computed({
  get() {
    return chatPanelStore.activeTabKey || 'one'
  },
  set(tab) {
    chatPanelStore.setActiveTab(tab as ChatPanelTabKey)
  },
})

const selectedTab = computed({
  get() {
    return chatPanelStore.activeTabKey || 'one'
  },
  set(tab) {
    chatPanelStore.setActiveTab(tab as ChatPanelTabKey)
  },
})

<UTabs
  v-model="selectedTab"
  :items="chatTabs"
  color="neutral"
  class="w-30 gap-0"
  :ui="{ list: 'bg-default' }"
/>

<UTabs
  v-model="selectedTab"
  :items="chatTabs"
  color="neutral"
  class="w-30 gap-0"
  :ui="{ list: 'bg-default' }"
/>

<UButton to="mailto:someone@example.com">
  Email Us
</UButton>

<UButton to="mailto:someone@example.com">
  Email Us
</UButton>

<script setup lang="ts">
import type { AccordionItem } from '@nuxt/ui'

const items: AccordionItem[] = [
  { label: 'First', value: 'first', content: 'First content' },
  { label: 'Second', value: 'second', content: 'Second content' },
  { label: 'Third', value: 'third', content: 'Third content' }
]
</script>

<template>
  <UAccordion :items="items" default-value="second" />
</template>

<script setup lang="ts">
import type { AccordionItem } from '@nuxt/ui'

const items: AccordionItem[] = [
  { label: 'First', value: 'first', content: 'First content' },
  { label: 'Second', value: 'second', content: 'Second content' },
  { label: 'Third', value: 'third', content: 'Third content' }
]
</script>

<template>
  <UAccordion :items="items" default-value="second" />
</template>

Error: Could not load the "sharp" module using the linux-x64 runtime
ERR_DLOPEN_FAILED: libvips-cpp.so.8.16.1: cannot open shared object file: No such file or directory

Error: Could not load the "sharp" module using the linux-x64 runtime
ERR_DLOPEN_FAILED: libvips-cpp.so.8.16.1: cannot open shared object file: No such file or directory

   npm install --platform=linux --arch=x64 sharp
   

   npm install --platform=linux --arch=x64 sharp
   

   pnpm add sharp --platform=linux --arch=x64
   

   pnpm add sharp --platform=linux --arch=x64
   

   npm install --include=optional sharp
   

   npm install --include=optional sharp
   

   npm rebuild sharp
   

   npm rebuild sharp
   

   pnpm rebuild sharp
   

   pnpm rebuild sharp
   

"scripts": {
  "postinstall": "pnpm add sharp --platform=linux --arch=x64"
}

"scripts": {
  "postinstall": "pnpm add sharp --platform=linux --arch=x64"
}

"build": "NODE_OPTIONS='--max-old-space-size=4096' nuxt build",
"postinstall": "nuxt prepare",

"build": "NODE_OPTIONS='--max-old-space-size=4096' nuxt build",
"postinstall": "nuxt prepare",

"postinstall": "nuxt prepare && pnpm add sharp --platform=linux --arch=x64"

"postinstall": "nuxt prepare && pnpm add sharp --platform=linux --arch=x64"

const { data: navigation } = await useAsyncData('navigation', () =>
  queryCollectionNavigation('legal')
)

const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('legal'), {
  server: false,
})

const { data: navigation } = await useAsyncData('navigation', () =>
  queryCollectionNavigation('legal')
)

const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('legal'), {
  server: false,
})

<script setup lang="ts">
const collections = ['blog', 'support', 'legal']

const { data: files } = useLazyAsyncData('search', async () => {
  const results = await Promise.all(
    collections.map((collection) => queryCollectionSearchSections(collection))
  )
  return results.flat()
}, {
  server: false,
})
</script>

<template>
  <UContentSearch :files="files" ... />
</template>

<script setup lang="ts">
const collections = ['blog', 'support', 'legal']

const { data: files } = useLazyAsyncData('search', async () => {
  const results = await Promise.all(
    collections.map((collection) => queryCollectionSearchSections(collection))
  )
  return results.flat()
}, {
  server: false,
})
</script>

<template>
  <UContentSearch :files="files" ... />
</template>

const { data: surround } = await useAsyncData(
  `${route.path}-surround`,
  () => queryCollectionItemSurroundings('support', route.path, { fields: ['description'] }),
  {
    transform: (result) => result?.map(item => {
      if (item && typeof item === 'object') {
        const { icon, ...rest } = item
        return rest
      }
      return item
    })
  }
)

const { data: surround } = await useAsyncData(
  `${route.path}-surround`,
  () => queryCollectionItemSurroundings('support', route.path, { fields: ['description'] }),
  {
    transform: (result) => result?.map(item => {
      if (item && typeof item === 'object') {
        const { icon, ...rest } = item
        return rest
      }
      return item
    })
  }
)

<script setup lang="ts">
import type { ContentNavigationItem } from '@nuxt/content'

const { data: navigation } = await useAsyncData('navigation', () =>
  queryCollectionNavigation('docs')
)
</script>

<template>
  <UContentNavigation :navigation="navigation" highlight />
</template>

<script setup lang="ts">
import type { ContentNavigationItem } from '@nuxt/content'

const { data: navigation } = await useAsyncData('navigation', () =>
  queryCollectionNavigation('docs')
)
</script>

<template>
  <UContentNavigation :navigation="navigation" highlight />
</template>

const { data: navigation } = await useAsyncData('navigation', async () => {
  const nav = await queryCollectionNavigation('support')
  if (nav && nav.length > 0) {
    nav[0].icon = 'i-lucide-your-icon' // Replace with your desired icon
  }
  return nav
})

const { data: navigation } = await useAsyncData('navigation', async () => {
  const nav = await queryCollectionNavigation('support')
  if (nav && nav.length > 0) {
    nav[0].icon = 'i-lucide-your-icon' // Replace with your desired icon
  }
  return nav
})

   ---
   title: "My Blog Post"
   date: 2024-06-01
   image: /images/blog/my-image.jpg
   ---
   
   Blog post content...
   

   ---
   title: "My Blog Post"
   date: 2024-06-01
   image: /images/blog/my-image.jpg
   ---
   
   Blog post content...
   

   import { defineCollection, defineContentConfig, z } from '@nuxt/content'

   export default defineContentConfig({
     collections: {
       blog: defineCollection({
         type: 'page',
         source: 'blog/*.md',
         schema: z.object({
           date: z.string(),
           image: z.string(),
         })
       })
     }
   })
   

   import { defineCollection, defineContentConfig, z } from '@nuxt/content'

   export default defineContentConfig({
     collections: {
       blog: defineCollection({
         type: 'page',
         source: 'blog/*.md',
         schema: z.object({
           date: z.string(),
           image: z.string(),
         })
       })
     }
   })
   

   <script setup>
   const { data: posts } = await useAsyncData('blog', () =>
     queryCollection('blog').order('date', 'DESC').all()
   )
   </script>

   <template>
     <div v-for="post in posts" :key="post._id">
       <img :src="post.image" :alt="post.title" />
       <h2>{{ post.title }}</h2>
       <p>{{ post.date }}</p>
     </div>
   </template>
   

   <script setup>
   const { data: posts } = await useAsyncData('blog', () =>
     queryCollection('blog').order('date', 'DESC').all()
   )
   </script>

   <template>
     <div v-for="post in posts" :key="post._id">
       <img :src="post.image" :alt="post.title" />
       <h2>{{ post.title }}</h2>
       <p>{{ post.date }}</p>
     </div>
   </template>
   

<script setup lang="ts">
const posts = ref([
  {
    title: 'Nuxt Icon v1',
    description: 'Discover Nuxt Icon v1!',
    image: '<https://nuxt.com/assets/blog/nuxt-icon/cover.png',>
    date: '2024-11-25'
  },
  // ...other posts
])
</script>

<template>
  <UBlogPosts :posts="posts" />
</template>

<script setup lang="ts">
const posts = ref([
  {
    title: 'Nuxt Icon v1',
    description: 'Discover Nuxt Icon v1!',
    image: '<https://nuxt.com/assets/blog/nuxt-icon/cover.png',>
    date: '2024-11-25'
  },
  // ...other posts
])
</script>

<template>
  <UBlogPosts :posts="posts" />
</template>

<script setup lang="ts">
const { data: posts } = await useAsyncData('posts', () =>
  queryCollection('blog').all()
)
</script>

<template>
  <UBlogPosts :posts="posts" />
</template>

<script setup lang="ts">
const { data: posts } = await useAsyncData('posts', () =>
  queryCollection('blog').all()
)
</script>

<template>
  <UBlogPosts :posts="posts" />
</template>

---
title: My Post
date: 2024-06-01
---

This post was published on {{ $doc.date }}.

---
title: My Post
date: 2024-06-01
---

This post was published on {{ $doc.date }}.

<script setup lang="ts">
const posts = ref([
  {
    title: 'Nuxt Icon v1',
    description: 'Discover Nuxt Icon v1!',
    image: '<https://nuxt.com/assets/blog/nuxt-icon/cover.png',>
    date: '2024-11-25',
    to: '/blog/nuxt-icon-v1' // This makes the card linkable
  },
  // ...other posts
])
</script>

<template>
  <UBlogPosts :posts="posts" />
</template>

<script setup lang="ts">
const posts = ref([
  {
    title: 'Nuxt Icon v1',
    description: 'Discover Nuxt Icon v1!',
    image: '<https://nuxt.com/assets/blog/nuxt-icon/cover.png',>
    date: '2024-11-25',
    to: '/blog/nuxt-icon-v1' // This makes the card linkable
  },
  // ...other posts
])
</script>

<template>
  <UBlogPosts :posts="posts" />
</template>

const posts = data.value.map(post => ({
  ...post,
  to: post._path // or whatever property holds the route
}))

const posts = data.value.map(post => ({
  ...post,
  to: post._path // or whatever property holds the route
}))

const transformedPosts = posts.value?.map((post) => ({
  ...post,
  to: post.path,
  badge: {
    label: post.category,
    color: 'primary',   // or any other color you want
    variant: 'solid',   // or 'outline', 'soft', etc.
  },
}))

const transformedPosts = posts.value?.map((post) => ({
  ...post,
  to: post.path,
  badge: {
    label: post.category,
    color: 'primary',   // or any other color you want
    variant: 'solid',   // or 'outline', 'soft', etc.
  },
}))

const transformedPosts = posts.value?.map((post) => ({
  ...post,
  to: post.path,
  ...(post.category && {
    badge: {
      label: post.category,
      color: 'primary',
      variant: 'solid',
    }
  }),
}))

const transformedPosts = posts.value?.map((post) => ({
  ...post,
  to: post.path,
  ...(post.category && {
    badge: {
      label: post.category,
      color: 'primary',
      variant: 'solid',
    }
  }),
}))

const transformedPosts = posts.value?.map((post) => ({
  ...post,
  to: post.path,
  variant: 'subtle',
  authors: authors,
  ...(post.category && {
    badge: {
      label: post.category,
      color: 'primary',
      variant: 'soft',
    },
  }),
}))

const transformedPosts = posts.value?.map((post) => ({
  ...post,
  to: post.path,
  variant: 'subtle',
  authors: authors,
  ...(post.category && {
    badge: {
      label: post.category,
      color: 'primary',
      variant: 'soft',
    },
  }),
}))

const authors = [
  {
    name: 'Anthony Fu',
    description: 'antfu7',
    avatar: {
      src: '<https://github.com/antfu.png',>
    },
    to: '<https://github.com/antfu',>
    target: '_blank',
  },
]

// Correct: authors is an array
const transformedPosts = posts.value?.map((post) => ({
  ...post,
  to: post.path,
  variant: 'subtle',
  authors: authors, // This is correct
  // ...other props
}))

const authors = [
  {
    name: 'Anthony Fu',
    description: 'antfu7',
    avatar: {
      src: '<https://github.com/antfu.png',>
    },
    to: '<https://github.com/antfu',>
    target: '_blank',
  },
]

// Correct: authors is an array
const transformedPosts = posts.value?.map((post) => ({
  ...post,
  to: post.path,
  variant: 'subtle',
  authors: authors, // This is correct
  // ...other props
}))