2

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>
kissu
  • 40,416
  • 14
  • 65
  • 133
Kunal Rajput
  • 664
  • 1
  • 7
  • 21
  • Wasn't clear that you wanted to use a specific `social share` npm package at first. So, what do you want exactly? Something like `this.$route.fullPath`? – kissu Apr 19 '22 at 20:07
  • I want to create a link in sharing data object, for the time being I did something like this ```url:process.env.NUXT_SERVER_BASE_URL + '/posts/' + this.post.slug'``` is there any better way than this – Kunal Rajput Apr 19 '22 at 22:43
  • You can properly use the env variables yeah: https://stackoverflow.com/a/67705541/8816585 – kissu Apr 19 '22 at 22:47
  • 1
    Thanks,it looks like what I did is also fine. I'll try and update my code in the morning, I'm not on the system right now. You can post it in the answer I'll accept it – Kunal Rajput Apr 19 '22 at 22:54
  • Can I dm you this weekend just for a suggestion overview. I'm working on side project I was thinking from 2 years. Finally started it last month and should get finished this weekend. Before sending it to Google for crawling, getting advice from you would be really great – Kunal Rajput Apr 19 '22 at 23:14
  • Alright, reach out to me on Discord (or other links available on my profile). – kissu Apr 19 '22 at 23:15
  • 1
    Sure thanks, I'll message you on Twitter – Kunal Rajput Apr 19 '22 at 23:17

1 Answers1

3

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.

kissu
  • 40,416
  • 14
  • 65
  • 133