Empty links to prismic pages

Developing with Prismic
,
1

Hello,
I'm building an header with links to prismic pages. I've created a content-type block-header with a group field who contains field text and field Link

{
  "format": "custom",
  "id": "header",
  "label": "Bloc d'en-tête",
  "repeatable": false,
  "status": true,
  "json": {
    "Main": {
      "header_navigation": {
        "type": "Group",
        "config": {
          "label": "Navigation header",
          "repeat": true,
          "fields": {
            "label_header": {
              "type": "Text",
              "config": {
                "label": "Link label
              }
            },
            "link_header": {
              "type": "Link",
              "config": {
                "label": "Link to page"
                "allowTargetBlank": false,
                "select": null
              }
            }
          }
        }
      }
    }
  }
}

In my vue (vue3 composition API, script setup + typescript) i retrieve data and loop them:

<script setup lang="ts">
import * as prismic from "@prismicio/client";
import type {AllDocumentTypes, HeaderDocument} from "~/prismicio-types";
import { PrismicLink } from "@prismicio/vue";

const HeaderNavItem = defineAsyncComponent(() => import('@/components/Layouts/HeaderNavItem.vue'))
const client = prismic.createClient<AllDocumentTypes>('my-prismic-repository')
const { data: navigation, error } = useAsyncData(
    'navigation',
    () => client.getSingle<HeaderDocument>('header', { lang: 'fr-fr'})
)
</script>

<template>
<ul>
  <HeaderNavItem
    v-for="(item, index) in navigation?.data.header_navigation"
    :key="index"
  >
	<PrismicLink :field="item.link_header">
	  {{ item.label_header }}
	</PrismicLink>
  </HeaderNavItem>
</ul>
</template>

Template HeaderNavItem :

<template>
  <li class="text-lg m-6 group relative w-max">
    <slot />
  </li>
</template>

Front-side, in navigator, labels are displayed, i see "a" HTML tag but is empty. "item.link_header" seems to be good typed. I retrieve my exemple from here .
I don't see what is wrong. Backoffice side, all seems OK, i've linked to my prismic pages.

  • Nuxt version 3
  • NodeJS 18
  • Vue3 Composition API

Problem in local and in netlify host.

Thank you :)

2

Hi @balistik.fonfon, thanks for your message!

This looks weird indeed. Can you share your Prismic repository name so I can make sure everything is alright on that end?

Not necessarily related, but I'm curious why you're not using auto-imports from the Prismic Nuxt module? You script setup part could be simplified to this:

<script setup lang="ts">
const { client } = usePrismic()
const { data: navigation, error } = useAsyncData('navigation',
  () => client.getSingle('header', { lang: 'fr-fr'})
)

// Then reference "HeaderNavItem" as "LazyHeaderNavItem" in your
// template (but I'm not sure that's really needed in your case), see:
// https://nuxt.com/docs/guide/directory-structure/components#dynamic-imports
</script>
1 Like
3

Hello, thank you for answer.

My repository name is "'societe-astronomique-montpellier'", defined un nuxt.config.js too.

export default defineNuxtConfig({
  devtools: { enabled: true },
  typescript: {
    typeCheck: true
  },
  modules: ["@nuxtjs/prismic"],
  prismic: {
    endpoint:  process.env.NUXT_PRISMIC_ENDPOINT, 
    clientConfig: [ /** routes **/]
  }
}

So exactly code is :

const client = prismic.createClient<AllDocumentTypes>('societe-astronomique-montpellier')
const { data: navigation, error } = useAsyncData(
    'navigation',
    () => client.getSingle<HeaderDocument>('header', { lang: 'fr-fr'})
)

Why not use const { client } = usePrismic() ...good question ^^, i used createClient() method everywhere. I will try with usePrismic().

EDIT : I replaced by usePrismic() and it seems it's working now :o

2 Likes
4

Awesome! Glad you got it working :smiling_face:

The Nuxt module indeed does some magic under the hood on the client, so using the client through createClient is not recommended~