Vue-select: SSR: window is not defined

[elliotlings]

Hi,

Is there anyway to get this to work with SSR?

ReferenceError: window is not defined
    at .../src/node_modules/vue-select/dist/vue-select.js:2:756
    at .../src/node_modules/vue-select/dist/vue-select.js:2:688
    at t.exports (.../src/node_modules/vue-select/dist/vue-select.js:2:974)
    at Object.<anonymous> (.../src/node_modules/vue-select/dist/vue-select.js:2:1452)
    at e (.../src/node_modules/vue-select/dist/vue-select.js:1:390)
    at Object.t.exports.t (.../src/node_modules/vue-select/dist/vue-select.js:1:28004)
    at e (.../src/node_modules/vue-select/dist/vue-select.js:1:390)
    at Object.<anonymous> (.../src/node_modules/vue-select/dist/vue-select.js:1:648)
    at e (.../src/node_modules/vue-select/dist/vue-select.js:1:390)
    at t.__esModule.default (.../src/node_modules/vue-select/dist/vue-select.js:1:478)
    at .../src/node_modules/vue-select/dist/vue-select.js:1:483
    at n.(anonymous function).exports (.../src/node_modules/vue-select/dist/vue-select.js:1:143)
    at Object.<anonymous> (.../src/node_modules/vue-select/dist/vue-select.js:1:261)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)

[elliotlings]

The only way I found to 'easily' get around this problem is to reference the source files directly, i.e:

import VueSelect from 'vue-select/src/index';

[goldendoodledev]

I have had this issue as well, and I fixed it by adding vue-select as a plugin. You can find an example of how to do this (with vue-select) here: https://medium.com/@codebeast_/why-your-third-party-plugin-dont-work-in-nuxt-and-how-to-fix-it-d1a8caadf422

Hope this helps.

[tagmetag]

Follow this instructions (with Second Attempt: Vue Plugins) fully but getting error:
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
NuxtJs 1.0.0
Any one like me? How can I fix this

[paulrosen]

I got it to work with Nuxt 1.0.0 by mostly following the medium post above, but adding the following:

In the control itself:

<v-select
  v-if="showSelect"
  ...

In the data:

data() {
  return {
    showSelect: false
  }
},

In mounted:

mounted() {
  this.showSelect = true;
},

I hope there is a more elegant solution, but at least it's working.

[olsonpm]

Don't your solutions all just get around the fact that vue-select isn't ssr compatible? Meaning the selectbox won't render on the server, defeating the purpose of ssr?

[paulKerckhove]

Hey I just got here, maybe it's too late @elliotlings but you can still use the no-ssr component if you are using nuxtJS
https://nuxtjs.org/api/components-no-ssr/
The ssr: false is not working well everywhere, but it would sure help if most of the external components out there would require window when everything is here on the DOM side.
Hope it helped !