vue + nuxt.js - 如何根据域拥有不同的样式？

Question

I have a multi-domain site with a single vue + nuxt app which needs to have different styles for each site. Any idea or suggestion how I can load different styles for a domain?

My first approach was to use a "global" function in a plugin js but it turned out to be too slow, respectively it get too late evaluated. This means the page is almost finished loaded until the class get evaluated. This leads to side effect that the elements get first wrongly displayed in its size or colours and later on correct displayed. This is confusing for a professional page.

ie plugins/helper.js

const domainHelper = {
  isDomain(domain) {
    if (process.client) {
      return window.location.hostname.includes(domain);
    }
    return false;
  },

inside a component / template

  <template>
     <div :class="$domainHelper.isDomain('aaa') ? 'aaa' : 'bbb'">
      ...
  </template>
  <style>
      div.aaa { color: red }
      div.bbb { color: blue }
  </style>

Answer 1

The reason for what you see is because your component is rendered on the server 1st - your helper is always returning false there so HTML send by the server and displayed by the browser ( before Vue is even initialized!) is always the same and changes only after Vue takes over the rendering...

To fix it, you need to render it on the server with correct styles. To do that, you need access to the request. Request is available in plugins:

~/plugins/domainDetectorPlugin.js

import Vue from "vue";

export default ({ req }, inject) => {
  const host = process.server ? req.headers.host : window.location.host;

  Vue.prototype.$isDomain = string => {
    // implement your detection using host variable defined earlier
  };
};

nuxt.config.js

export default {
  plugins: ['~/plugins/domainDetectorPlugin.js']
}

Components:

<template>
   <div :class="$isDomain('aaa') ? 'aaa' : 'bbb'">
    ...
</template>
<style>
    div.aaa { color: red }
    div.bbb { color: blue }
</style>