showing the hostname in a vue.js template

Question

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!

Answer 1

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({
  el: '#app',
  
  data () {
    return {
      currentUrl: location.toString(),
      host: location.host
    }
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="app">
  <p>Full: {{ currentUrl }}</p>
  <p>Host: {{ host }}</p>
</div>

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