Setting the base url inside a anchor tag href in VueJS

In my Vue JS application I have a component to share a link on twitter and Facebook. Following is my code for twitter share option

<a href="http://twitter.com/share?text=Verbatim&url=https://test.sample.site/&hashtags=hashtag1,hashtag2,hashtag3">

I have two environments. Test and Live. Because of that when ever I change the environment I have to change the url parameter of he anchor tag manually. But without seting that manually, I’m trying to put he base url inside that anchor.

Eg: Instead of using https://test.sample.site how can I set the base url?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You can use window.location.origin.

in data property:

data: () => {
    return {
      baseUrl: window.location.origin,
    };
},

And in template section:
<a :href="`http://twitter.com/share?text=Verbatim&url=${baseUrl}&hashtags=hashtag1,hashtag2,hashtag3`"
>link</a>

Method 2

Laraval has provided methods to get base URL:

// Get the base URL.
echo url('');

// .env file set app URL
echo config('app.url');

If you needed current URL then use below method:
echo url()->current();

As per your requirement:

<a href="http://twitter.com/share?text=Verbatim&url={{ url('') }}/&hashtags=hashtag1,hashtag2,hashtag3">example</a>


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x