Home > Blockchain >  How to create Nuxt route full path in the data object?
How to create Nuxt route full path in the data object?

Time:04-20

I'm trying to integrate social share in my nuxt application, I am trying to set my page URL in the data object. Following is my code please guide me on how I can set sharing.url like we do with NuxtLink?

<NuxtLink :to="{ name: 'posts-slug', params: { slug: post.slug } }">
  some title
</NuxtLink>

social share component

<template>
  <ShareNetwork
    v-for="network in networks"
    :url="sharing.url"
    :title="sharing.title"
    :description="sharing.description"
  >
  </ShareNetwork>
</template>

<script>
export default {
  data() {
    return {
      sharing: {
        // how can I set following url with the post prop, like I did with Nuxt link which creates href
        url: 'https://mywebsite.com/posts/wide-angle-mountain-view',
        title: 'Say hi to Vite!',
        description: 'This week',
      },
    }
  },
}
</script>

CodePudding user response:

You could have something like this

:url="`${nuxtServerBaseUrl}/posts/${post.slug}`"

with nuxtServerBaseUrl being your publicRuntimeConfig env variable.

As of regarding the configuration suggested here.

  • Related