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 misunderstandin

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: '',
  components: { App },
});

Hope this helps everyone!!!