Handle Layout design on the basis of hostname.

[saileshkush95]

I'm using this code to distinguish routes of different hostname.

import default_routes from "./default";
import tenantone from "./tenantone";
import tenanttwo from "./tenanttwo";

const currentHostName = window.location.hostname;
let router;

if (currentHostName === "127.0.0.1") {
  router = tenantone;
} else if (currentHostName === "localhost") {
  router = tenanttwo;
} else {
  router = default_routes;
}

export default router;

and this is working properly but I've little bit issue. Since every hostname has completely different layout. for example when i'm using this code in App.vue

<template>
    <div id="nav">
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </div>
  <router-view />
</template>

<script>
export default {
  name: "App",

  data: () => ({
    //
  }),
};
</script>

Navbar is available in all the tenant. and also this is the problem. How can I handle this situation properly. because, each and every tenant have its own navbar design and layout. I didn't want to repeat myself.

and here is my project layout.

[vue-bot]

Hello, thank you for taking time filling this issue!

However, we kindly ask you to use our Issue Helper when creating new issues, in order to ensure every issue provides the necessary information for us to investigate. This explains why your issue has been automatically closed by me (your robot friend!).

I hope to see your helper-created issue very soon!