Vue-router: Subdomain Routing in vuejs

Created on 12 Nov 2015 · 8Comments · Source: vuejs/vue-router

Hi everybody. Our first vuejs project next to end. But I faced a problem with routing subdomains. Users can use their user names as subdomain to show their contact informations for example : http://kamuransonecek.exlample.com

how can I detect username from subdomain to routing the site pages?

'http://:userName.example.com': {
    component: require('./views/userinfo')
  },

This codes not work as I espected. I wait for your helps. Thanks

Source

kamuran21

Most helpful comment

My solution is this :

'/': {
    component: function() {
      var reg = new RegExp("www|sitename|test|localhost:8000");
      var parts = window.location.host.split(".");
      return reg.test(parts[0]) ? require('./views/home') : require('./views/subdomain');
    }()
  },

I hope it will be helpful for others.

kamuran21 on 16 Nov 2015

👍26 🎉9 ❤7

All 8 comments

If this is posible I'll be very surprised.

nicolasparada on 12 Nov 2015

alioygur on 12 Nov 2015

You shouldn't need vue-router to get this. Just use window.location.host and use regex to extract it yourself.

yyx990803 on 14 Nov 2015

👍8 🎉2 🚀1

My solution is this :

'/': {
    component: function() {
      var reg = new RegExp("www|sitename|test|localhost:8000");
      var parts = window.location.host.split(".");
      return reg.test(parts[0]) ? require('./views/home') : require('./views/subdomain');
    }()
  },

I hope it will be helpful for others.

kamuran21 on 16 Nov 2015

👍26 🎉9 ❤7

What about SSR? How to get domain name on server?

zolotov88 on 18 Feb 2018

👍4

For SSR see https://github.com/nuxt/nuxt.js/issues/2378

wernerm on 8 Mar 2018

@zolotov88 if you are using ssr you will only want use window when it is available and if you are using express use the 'req' param of your middleware to get the subdomain on first request and the use that to match routes with.