Как достать META теги из API используя Nuxt.js

Question

делаю проект на NUXT и сейчас возник волпрос как реализовать title и Description Динамически У меня есть сервер который отдает API (http://localhost:3005/)

он возвращает JSON в котором есть узел head приблизительно выглядит так

JSON

head : {
    title: "Home page",
    description: "Description for Home page",
}

NuxtJSCode

import axios from "axios";
    export default {
        name: 'IndexPage',
        async fetch () {
            // Meta
            let res = await fetch('http://localhost:3005/')
            res = await res.json()
            // console.log(res)
            this.title = res.head.title
            this.description = res.head.description
            
            this.$store.commit('frontPagePosts', res.tours.posts)

            // Posts
            // return axios.get('http://localhost:3005/').then((res) => {
            //  this.$store.commit('frontPagePosts', res.data.tours.posts)
            //  // console.log(res.data)
            // }).catch((error) => {
            //  console.log(error)
            // })
        },

        head() {
            return {
                title: this.title,
                meta: [
                    {description: this.description},
                ],
            }
        },

        computed : {
            posts() {
                return this.$store.state.posts
            }
        }
    }

Когда я использую такой метод Тайтлы и Дескрипшини подгружаются только если перезагрузить страницу а я хочу чтобы они грузились при смене роута

Answer 1

<script>
    import axios from "axios";
    export default {
        name: "index",
        fetch ({store}) {
            let requestPageApi =  axios.get('http://localhost:3005/search/?limit=2').then((res) => {
                store.commit('frontPagePosts', res.data.tours.posts)
                store.commit('routePageHead', res.data.head)

                // console.log(res.data)
            }).catch((error) => {
                console.log(error)
            })
            return requestPageApi
        },

        head() {
            return {
                title: this.$store.state.head.title,
                meta: [
                    { hid: 'description', name: 'description', content: this.$store.state.head.description },
                ],
            }
        },

        mounted() {
            console.log(this.$route.query)
        },
        computed : {
            posts() {
                return this.$store.state.posts
            }
        }
    }
</script>

БЛОГ НА HUSL

Как достать META теги из API используя Nuxt.js

Ответы (1 шт):