[Bug] SSR (Gridsome)

[andrevandal]

Hi, I'm using this lib with Gridsome and I've got this error:

6:35:42 PM: ReferenceError: window is not defined
6:35:42 PM:     at Object.b635 (node_modules/vue-resize-text/dist/vue-resize-text.common.js:210:0)
6:35:42 PM:     at __webpack_require__ (node_modules/vue-resize-text/dist/vue-resize-text.common.js:21:0)
6:35:42 PM:     at Module.fb15 (node_modules/vue-resize-text/dist/vue-resize-text.common.js:272:0)
6:35:42 PM:     at __webpack_require__ (node_modules/vue-resize-text/dist/vue-resize-text.common.js:21:0)
6:35:42 PM:     at exports.modules.315.module.exports.1eb2.i (node_modules/vue-resize-text/dist/vue-resize-text.common.js:85:0)
6:35:42 PM:     at Object.315 (node_modules/vue-resize-text/dist/vue-resize-text.common.js:88:0)
6:35:42 PM:     at __webpack_require__ (webpack/bootstrap:25:0)
6:35:42 PM:     at Module.368 (assets/js/page--src--pages--index-vue.a5043cb5.js:1352:30)
6:35:42 PM:     at __webpack_require__ (webpack/bootstrap:25:0)
6:35:42 PM: error Command failed with exit code 1.

This is how I'm using:

<template>
<ClientOnly>
  <h1
    class="text-center text-md-left flex-column mb-4 mx-auto w-100"
    v-resize-text="{ ratio: .8, maxFontSize: '60px' }"
    v-html="content"
  />
</ClientOnly>
</template>
<script>
import ResizeText from 'vue-resize-text'

export default {
  /* ... */
  directives: {
    ResizeText
  }
}
</script>

Cloud you help me?

[niklasnoldin]

Hi, I'm having the same problem. Did you get any response or did you find a solution?

[andrevandal]

No :(

[niklasnoldin]

Ok I found a solution. With the client API of gridsome, you're able to conditionally install plugins for vue in your src/main.js.

export default function(Vue, { router, head, isClient }) {
// ...
if (isClient) Vue.use(require("vue-resize-text"));
// ...
}

You'll have to install the directive globally though.