# Empty links to prismic pages

**URL:** <https://community.prismic.io/t/empty-links-to-prismic-pages/16352>\
**Category:** Developing with Prismic\
**Tags:** typescript, nuxtjs\
**Created:** [July 18, 2024, 9:34am UTC](https://community.prismic.io/t/empty-links-to-prismic-pages/16352 "2024-07-18T09:34:47Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![balistik.fonfon](https://avatars.discourse-cdn.com/v4/letter/b/4da419/32.png) [@balistik.fonfon](https://community.prismic.io/u/balistik.fonfon)\
**Post date:** [July 18, 2024, 9:34am UTC](https://community.prismic.io/t/empty-links-to-prismic-pages/16352/1 "2024-07-18T09:34:47Z")

</div>

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

```auto
{
  "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:

```auto
<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 :

```auto
<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](https://github.com/prismicio-community/nuxt-starter-prismic-blog/blob/b757ff7dbedb6e9cf2527c0dade935d293d94d94/components/Header.vue) .  
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 :)

---

<div class="post-metadata">

**Author:** ![lihbr](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/lihbr/32/7409_2.png) [@lihbr](https://community.prismic.io/u/lihbr)\
**Post date:** [July 22, 2024, 1:25pm UTC](https://community.prismic.io/t/empty-links-to-prismic-pages/16352/2 "2024-07-22T13:25:01Z")

</div>

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:

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![balistik.fonfon](https://avatars.discourse-cdn.com/v4/letter/b/4da419/32.png) [@balistik.fonfon](https://community.prismic.io/u/balistik.fonfon)\
**Post date:** [July 24, 2024, 7:41am UTC](https://community.prismic.io/t/empty-links-to-prismic-pages/16352/3 "2024-07-24T07:41:44Z")

</div>

Hello, thank you for answer.

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

```auto
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 :

```auto
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

---

<div class="post-metadata">

**Author:** ![lihbr](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/lihbr/32/7409_2.png) [@lihbr](https://community.prismic.io/u/lihbr)\
**Post date:** [July 24, 2024, 12:24pm UTC](https://community.prismic.io/t/empty-links-to-prismic-pages/16352/4 "2024-07-24T12:24:40Z")

</div>

Awesome! Glad you got it working ☺

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