1

I have a multi domain page which should show components for each domain differently. Therefore I like to have a "global" function which I can use in the "v-if" statement inside a template

I followed the recommendation to create a global object by using a plugin how-to-define-a-global-method-accessible-to-all-components. Unfortunately I don't know how I can get the hostname / domain name at this time, because the js object "window" seems to be undefined?

Any idea how I best can achieve that? Thank you

My plugin "global.js" => returns error that 'window" object is undefined

const cmsURLBuilder = {
    isDomain(domain) {
        return this.window.location.hostname.includes(domain); 
    },
}

export default ({app}, inject) => {
    inject('cmsURLBuilder', cmsURLBuilder);
}

Make use of this global object in my template

<template>
  <div>
    <iframe v-if="$cmsURLBuilder.isDomain('xxx')"  id="frame-xxx" src="https://xxxx/..." />
     ...
  </div>
</template>
Tom Wright
  • 11,278
  • 15
  • 74
  • 148
megloff
  • 1,400
  • 4
  • 27
  • 44

1 Answers1

2

Set your plugin mode to client.

plugins: [
    { src: '~/plugins/myplugin.js', mode: 'client' }
]

or wrap your call to the window object,

if (process.client) {
  console.log('window.location', window.location)
}
Tom Shaw
  • 1,642
  • 2
  • 16
  • 25