showing the hostname in a vue.js template

Asked By: Anonymous

Say I have something like this:

<q-input v-model="form.uuid" inverted-light color="white" stack-label="Your subdomain:" @blur="$v.form.uuid.$touch"
    :error="$v.form.uuid.$error"
    suffix=".website.com">
</q-input>

Right now .website.com is hard-coded but what if I wanted to make it so that it was based off of the hostname that was used to access the website? ie. if I went to mydomain.tld it wouldn’t show website.com – it’d show mydomain.tld.

Any ideas?

Thanks!

Solution

Answered By: Anonymous

The difficult part here is removing the subdomain. I’m not aware of a reliable way to do that.

Just getting the host rendering in the template should be easy enough:

new Vue({_x000D_
  el: '#app',_x000D_
  _x000D_
  data () {_x000D_
    return {_x000D_
      currentUrl: location.toString(),_x000D_
      host: location.host_x000D_
    }_x000D_
  }_x000D_
})

<a href="https://unpkg.com/[email protected]/dist/vue.js">https://unpkg.com/[email protected]/dist/vue.js</a>_x000D_
_x000D_
<div id="app">_x000D_
  <p>Full: {{ currentUrl }}</p>_x000D_
  <p>Host: {{ host }}</p>_x000D_
</div>

x000D

Obviously it’d need to be tweaked for the original example, something like :suffix="'.' + host".