Vue.js: vue-router subdomains

Question

The vue-router documentation does not address this topic.

Perhaps my expectation that vue-router could handle this illustrates a fundamental misunderstanding of mine of how subdomains operate.

Could this be handled by vue-router, and if so, how, and if not, why not?

Answer 1

I had faced this same problem while setting up multiple subdomains for a client.

As @mzgajner mentioned it's true that it is not directly possible.

But I would like to show you a simple hacky configuration which can help you setup your Vue.js application work on multiple subdomains.

You can use window.location in javascript or HTML's anchor tag to redirect your app on your subdomain. And then setup your vue-router to handle new routes.

I've made this GitHub repo which runs on 3 different subdomains.

In this GitHub repo, look at this file. It shows a simple configuration to setup different routes for different subdomains.

import Vue from 'vue';
import App from './App';
import index from './router';
import route1 from './router/route1';
import route2 from './router/route2';

Vue.config.productionTip = false;

const host = window.location.host;
const parts = host.split('.');
const domainLength = 3; // route1.example.com => domain length = 3

const router = () => {
  let routes;
  if (parts.length === (domainLength - 1) || parts[0] === 'www') {
    routes = index;
  } else if (parts[0] === 'route1') {
    routes = route1;
  } else if (parts[0] === 'route2') {
    routes = route2;
  } else {
    // If you want to do something else just comment the line below
    routes = index;
  }
  return routes;
};

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router: router(),
  template: '<App/>',
  components: { App },
});

Hope this helps everyone!!!

Answer 2

Nope, it's not possible.

vue-router uses history.pushState, which doesn't allow you to change the origin. Quote from the docs:

The new URL must be of the same origin as the current URL; otherwise, pushState() will throw an exception.

In other words - vue-router is a client-side router and you can't change the subdomain on the client-side (in the browser) without reloading the page.