Nuxt 3 with slug

[latent sun]

When using [slug].vue and the following script, I'm getting page not found. I had set up a pages collection in Directus with a slug manual input field. One of the pages slugs is called, about.

Visiting http://localhost:3000/about leads to Page Not Found.

<script setup>
  const { $directus } = useNuxtApp()
  const route = useRoute()
  const { data: page } = await useAsyncData('page', () => {
    return $directus.items('pages').readOne(route.params.slug)
  })
  if (!page.value) throw createError({ 
    statusCode: 404, 
    statusMessage: 'Page Not Found' 
  })
</script>

[warm zodiac]

Thanks for posting! This is a community powered server, so you may or may not get an answer based on available help and expertise. To increase your chances of somebody being able to help you, please help us help you making sure you:

• Adding an explanation of exactly what you're trying to achieve.
• Adding any and all related code or previous attempts.
• Describing the exact issue or error you are facing.
• Posting any screenshots if applicable.
• Reading through https://stackoverflow.com/help/how-to-ask.

When you're done with this thread, please close it. Thanks! ✨

(If you have a support agreement and need help, please contact the core team via email.)

[latent sun]

Nuxt 3 with slug

If I change the file to [id].vue with this script, visit http://localhost:3000/1 it works, so why doesn't using slug instead work?

[latent sun]

I'm also having a similar issue with posts collection. The dynamic [slug].vue route is leading to a 404.

[solid knoll]

readOne in the SDK only works on the primary key field

For the setup you’ve posted you’d want to be using readByQuery

[latent sun]

@solid knoll I'm literally following the guide here, based on this step: https://docs.directus.io/guides/headless-cms/build-static-website/nuxt-3.html#creating-pages-with-directus I've also downloaded the github repo for this as well. https://github.com/directus/examples/blob/main/website-nuxt3/pages/[slug].vue

Here's my directus.js:

import { Directus } from '@directus/sdk'

const directus = new Directus('http://localhost:8055')

export default defineNuxtPlugin(() => {
  return {
    provide: { directus }
  }
})

I've also tried http://0.0.0.0:8055

[solid knoll]

Got it. There’s an important bit in that guide about making ‘slug’ the primary key field.

I think you might have missed that bit. Which is why calling readOne with the id of 1 works.

It’s not a huge deal though because you can still get the page using readByQuery and setting a filter rule for the slug.

[latent sun]

There’s an important bit in that guide about making ‘slug’ the primary key field.
You're absolutely right about that. I honestly didn't exactly know about setting he primary key field. I had used the Astro example in the past, and didn't recall about assigning the slug as the primary field key. That's because the Astro example uses [id].astro instead. I see. Thanks!

[solid knoll]

In most of my personal projects, I actually prefer NOT using the slug as the primary key because you cannot change the primary key value for an item.

If you use readByQuery instead - it might look something like this

<script setup>
  const { $directus } = useNuxtApp()
  const route = useRoute()
  const { data: page } = await useAsyncData('page', () => {
    return $directus.items('pages').readByQuery({
      filter: {
        slug: {
          _eq: route.params.slug
        }
      }
    })
  }, {
    transform: (data) => data.data[0]
  })
  if (!page.value) throw createError({ 
    statusCode: 404, 
    statusMessage: 'Page Not Found' 
  })
</script>