Nuxt3 title and description problem

Technical Questions
1

Hi, i have changed title and description in pagefields menu but when i enter the page i see no title and description.

this is my code in […app].vue

<template>
  <div id="home">
    {{ content }}
    <div v-if="content || isPreviewing()">
      <RenderContent
        model="page"
        :content="content"
        :api-key="BUILDER_PUBLIC_API_KEY"
        :custom-components="REGISTERED_COMPONENTS"
      />
    </div>
    <div v-else><error /></div>
  </div>
</template>

<script setup>
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { RenderContent, getContent, isPreviewing } from '@builder.io/sdk-vue';

//builderio

import { HeroMainBuilderOptions } from '@/components/hero/main.vue';



// Register your Builder components
const REGISTERED_COMPONENTS = [];

REGISTERED_COMPONENTS.push(HeroMainBuilderOptions);


const runtimeConfig = useRuntimeConfig();

// TODO: enter your public API key
const BUILDER_PUBLIC_API_KEY = runtimeConfig.public.builderKey; // ggignore

const route = useRoute();

// fetch builder content data
const { data: content } = await useAsyncData('builderData', () =>
  getContent({
    model: 'page',
    apiKey: BUILDER_PUBLIC_API_KEY,
    userAttributes: {
      urlPath: route.path,
    },
  }),
);
</script>

image

image
image692×782 19 KB

2

Hello @Ischafak,

We highly recommend implementing the appropriate title and description meta tags for your content. Utilizing content?.data?.title and content?.data?.description would ensure effective rendering.

<template>
  <div id="home">
    <div>Hello world from your Vue project. Below is Builder Content:</div>

    <div v-if="content || isPreviewing()">
      <div>
        page title:
        {{ content?.data?.title || 'Unpublished' }}
      </div>
      <RenderContent
        model="page"
        :content="content"
        :api-key="BUILDER_PUBLIC_API_KEY"
        :customComponents="REGISTERED_COMPONENTS"
      />
    </div>
    <div v-else>Content not Found</div>
  </div>
</template>

Hope this helps!

Thanks,

4

hi, thanks for reply. i dont want to write title and description to screen. When i write this code will it add title and description as meta tags?

5

Hello @Ischafak,

There’s no need to manually write title and description tags on the screen. In Nuxt, there are various ways to include SEO meta tags. For your reference, we recommend checking out the documentation at the following link: Nuxt SEO Meta Documentation

Additionally, here’s an example that works with Nuxt:

<template>
  <div id="home">
    <Head>
      <Title>{{ content?.data?.title }}</Title>
      <Meta name="description" :content="content?.data?.description" />
    </Head>
    <div>Hello world from your Vue project. Below is Builder Content:</div>

    <div v-if="content || isPreviewing()">
      <div>
        page title:
        {{ content?.data?.title || 'Unpublished' }}
      </div>
      <RenderContent
        model="page"
        :content="content"
        :api-key="BUILDER_PUBLIC_API_KEY"
        :customComponents="REGISTERED_COMPONENTS"
      />
    </div>
    <div v-else>Content not Found</div>
  </div>
</template>
6

it works thank you so much