Question 264568 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to get page title in Nuxt 3?

I am struggling to find a way to get page title in Nuxt 3 and reuse it in layout. I am pretty sure there is a way to do it through some meta object but I just can not find it.

I tried to do it through route meta

/layouts/default.vue

<template>
    <h1>
        {{ route.meta.title }}
    </h1>
</template>

<script setup>
    const route = useRoute();
</script>

But now when I have to set title I need to do it twice so this method works

/pages/catalog.vue

<script setup>
    definePageMeta({
        title: 'Catalog Page',
    });

    useHead({
        title: 'Catalog Page',
    });
</script>

Seems realy hacky so I open to ideas here

Tags:

2

Answers


  1. 0

    useHead() allows you to edit site/page title – https://nuxt.com/docs/api/composables/use-head

    <script setup>
useHead({
  title: "My custom page title"
})
</script>

    It can also be a dynamic, even reactive value.

    Just not sure what you mean with "getting" it?

    For example in my Nuxt demo project I defined page title inside app.config.ts file:

    export default defineAppConfig({
  textTitle: 'Nuxt Demos - Nuxt Stack'
})

    and then I reference it via useHead in app.vue:

    useHead({
  title: useAppConfig().textTitle
})

    Might this help you?

    Login or Signup to reply.
  2. 0

    If you want to get the current title and rework it somehow you can always use

    document.title

    as long as it is not server-side rendered

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search