Vue.js - How to handle multiple subdomains on a single app.

3 min readJan 7, 2019

In this article, I’m going to show you how we can divide a Vue.js application into multiple subdomains (or multiple domains if you want) like example.com, admin.example.com, test.example.com etc. in 3 simple steps.

Originally published at https://gosink.in/vue-js-how-to-handle-multiple-subdomains-on-a-single-app/

Setting up a Vue.js application with Vue Router.
Configuring hosts on Windows and Mac/Linux for testing locally.
Splitting the Routes and Layouts, and testing.

Github Repository:

https://github.com/apal21/Vue.js-VueRouter-multiple-subdomains

Setting up a Vue.js Application

To set up a Vue.js application, first, we need to install thevue-cli globally.

$ npm install -g @vue/cli

Now we have to initialize a new Vue application using vue-cli . We’ll use PWA (Progressive Web Application) boilerplate. To initialize this, run the following command:

$ vue init pwa project-name
$ cd project-name
$ npm install
$ npm run dev

In this installation, it will ask you to install VueRouter .
If you didn’t install VueRouter from this installation or you’re using any other Vue boilerplate just run the following command to install it.

$ npm install vue-router --save

Configuring localhosts / Servers

We’re going to create 3 different domains/subdomains, myapp.local route1.myapp.local route2.myapp.local on Windows and Mac/Linux.

Windows

Open CMD (command prompt) as an administrator and run the following command:

> notepad c:\Windows\System32\Drivers\etc\hosts

Now add these lines at the end of the file:

127.0.0.1 myapp.local
127.0.0.1 route1.myapp.local
127.0.0.1 route2.myapp.local

Save and close the file and that’s it.

Mac/Linux

For Mac or Linux users, open a terminal and run the following command:

$ sudo nano /etc/hosts

Now add these lines at the end of the file.

127.0.0.1 myapp.local
127.0.0.1 route1.myapp.local
127.0.0.1 route2.myapp.local

Press Ctrl + X or Command + X to exit the nano editor and hit Y to save the changes we’ve made in that file.

Writing the Code — Setting up VueRouter

This Github repo is the working example of this blog and you can read the README.mdfile to configure the project.

Setup Routes

If you see the router directory, it shows 3 different routes:

All three routes are handling different components.

Configure Routes

This file in the Github repo has three routes configured in it.

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 },
});

Here, the constant router first fetches the URL and extracts the domain name. It checks for the domain name and assigns a route and returns it and this router is handled by the Vueat the bottom.

Note: You can’t use vue-router to change the subdomain. It depends on the JavaScript’s History API and it doesn’t let you update the cross-domain URL.
You can use HTML’s anchor tag <a> or JavaScript’s window.location or window.open etc to change the subdomain.