N
Nuxt•4mo ago
Uchuu

Nuxt Content queryCollection not found

const { data: prizes } = await useAsyncData('prizes', () => { return queryCollection('prizes').order('date', 'ASC').all() }) Cannot find name 'queryCollection'.ts-plugin(2304)
2 Replies
kapa.ai
kapa.ai•4mo ago
Hi @Uchuu. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error "Cannot find name 'queryCollection'" usually means that the queryCollection function is not available in your current scope. According to the Nuxt Content documentation, queryCollection is auto-imported when using Nuxt Content v3, so you should not need to import it manually in most cases. However, this auto-import only works if Nuxt Content is properly installed and configured in your project. Here are some steps to resolve the issue: 1. Ensure Nuxt Content is installed and enabled
Make sure you have @nuxt/content installed and added to your nuxt.config.ts modules. 2. Check your Nuxt Content version
The queryCollection API is available in Nuxt Content v3 and later. If you are using an older version, you may need to upgrade and migrate from queryContent to queryCollection as described in the migration guide see migration changes. 3. Auto-imports
If you are using a TypeScript file, ensure that your IDE recognizes Nuxt's auto-imports. Sometimes, restarting your IDE or running nuxi prepare can help update type definitions. 4. Define your collection
Make sure you have defined the prizes collection in your content.config.ts file. For example: 
   import { defineCollection, defineContentConfig, z } from '@nuxt/content'

   export default defineContentConfig({
     collections: {
       prizes: defineCollection({
         type: 'data',
         source: 'prizes/*.json',
         schema: z.object({
           date: z.string(),
           // ...other fields
         })
       })
     }
   })
   
   import { defineCollection, defineContentConfig, z } from '@nuxt/content'

   export default defineContentConfig({
     collections: {
       prizes: defineCollection({
         type: 'data',
         source: 'prizes/*.json',
         schema: z.object({
           date: z.string(),
           // ...other fields
         })
       })
     }
   })
Defining Collections 5. Usage in Vue files
In your Vue files, you can use queryCollection directly as shown: 
   <script setup lang="ts">
   const { data: prizes } = await useAsyncData('prizes', () => {
     return queryCollection('prizes').order('date', 'ASC').all()
   })
   </script>
   
   <script setup lang="ts">
   const { data: prizes } = await useAsyncData('prizes', () => {
     return queryCollection('prizes').order('date', 'ASC').all()
   })
   </script>
Query Utils: queryCollection If you have followed all these steps and still see the error, double-check that your Nuxt Content module is up to date and that your IDE is not caching old type definitions. If you are using the server API (e.g., in server/api/), you need to pass the event as the first argument to queryCollection: 
export default eventHandler(async (event) => {
  const prizes = await queryCollection(event, 'prizes').order('date', 'ASC').all()
  return prizes
})
export default eventHandler(async (event) => {
  const prizes = await queryCollection(event, 'prizes').order('date', 'ASC').all()
  return prizes
})
Server Usage If the problem persists after these checks, please provide more details about your project setup and Nuxt Content version. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4mo ago
<@1035470271441805353> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?