Vue-select: I use nuxt with vue-select, but got window is not defined

[leftjs]

Hi,
I use nuxt plugins to add vue-select, but when I use in my pages, I got this error, how can I fix this?

[sagalbot]

@leftjs were you able to solve this? Was it an issue with the library?

[leftjs]

yes, you can add process.BROWSER_BUILD flag to load vue-select only at browser , click here to find usage

[sagalbot]

Awesome, thanks.

[irobayna]

@sagalbot Were you able to fix this?

@leftjs I am getting the same thing simply by doing this on vue-select.js plugin:

import Vue from 'vue'
import vSelect from 'vue-select'
if (process.BROWSER_BUILD) {
  Vue.use(vSelect, {})
}

nuxt.config.js

...
  build: {
    vendor: ['mini-toastr', 'vue-notifications', 'vue-select']
  },
  plugins: [
      '~plugins/vue-notifications.js',
      '~plugins/vue-select.js'
     ]
...

Error:

Vue.js error

ReferenceError: window is not defined
    at /Users/irobayna/ctg/src/javascript/roadShow/node_modules/vue-select/dist/vue-select.js:2:719
    at /Users/irobayna/ctg/src/javascript/roadShow/node_modules/vue-select/dist/vue-select.js:2:651
    at t.exports (/Users/irobayna/ctg/src/javascript/roadShow/node_modules/vue-select/dist/vue-select.js:2:937)
    at Object.<anonymous> (/Users/irobayna/ctg/src/javascript/roadShow/node_modules/vue-select/dist/vue-select.js:2:1415)
    at e (/Users/irobayna/ctg/src/javascript/roadShow/node_modules/vue-select/dist/vue-select.js:1:390)
    at Object.t.exports.t (/Users/irobayna/ctg/src/javascript/roadShow/node_modules/vue-select/dist/vue-select.js:1:27845)
    at e (/Users/irobayna/ctg/src/javascript/roadShow/node_modules/vue-select/dist/vue-select.js:1:390)
    at Object.<anonymous> (/Users/irobayna/ctg/src/javascript/roadShow/node_modules/vue-select/dist/vue-select.js:1:648)
    at e (/Users/irobayna/ctg/src/javascript/roadShow/node_modules/vue-select/dist/vue-select.js:1:390)
    at t.__esModule.default (/Users/irobayna/ctg/src/javascript/roadShow/node_modules/vue-select/dist/vue-select.js:1:478)
    at /Users/irobayna/ctg/src/javascript/roadShow/node_modules/vue-select/dist/vue-select.js:1:483
    at n (/Users/irobayna/ctg/src/javascript/roadShow/node_modules/vue-select/dist/vue-select.js:1:143)
    at Object.<anonymous> (/Users/irobayna/ctg/src/javascript/roadShow/node_modules/vue-select/dist/vue-select.js:1:261)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)

[sagalbot]

Server Side Rendering

[sagalbot]

@irobayna I haven't used nuxt at all yet, but just off the top of my head I'd try:

import Vue from 'vue'

if (process.BROWSER_BUILD) {
  import vSelect from 'vue-select'
  Vue.use('v-select', vSelect)
}

Testing out server side rendering is on my roadmap, but I have a few other items taking precedence. Let me know if you do sort it out.

[irobayna]

Thanks @sagalbot

The problem with moving import into the if statement is that I get the following error (rightly so, I believe)

Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level (6:2)

in order words, all import statements have to be at the top of the file

[jeremytenjo]

Hi @irobayna ,

Where you finally able to make vue-select work?

Cheers,

[irobayna]

@tenjojeremy Unfortunately I did not make this work but found this other project which provides the same functionality which worked 'out of the box':

https://github.com/monterail/vue-multiselect

[jeremytenjo]

@irobayna Thanks for the quick response.

Funny, I tried using mutliselect and I Couldn't get it to work.

I Get a "The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside

, or missing . Bailing hydration and performing full client-side render.' error

Do you mind showing me how you set it up yourself to make multiselect work?

[irobayna]

Do you want to open an issue on the other project (i.e: how to use w/ nuxt.. whatever), Then ping me and I will post my code over there??

[jeremytenjo]

@irobayna Sure.

Thank you.

[sagalbot]

I still haven't dug into this, but I'm guessing it's due to attempting to load the CSS.

I can vouch for multiselect though, @shentao is on the ball.

[irobayna]

@sagalbot There is a brand new feature on the latest Nuxt.js which might resolve the problem I was seeing (I have not test it).

Basically now you can specify at the time you import plugins into nuxt.config.js if it is ssr or not, hence not needing the previous if (process.BROWSER_BUILD) { checks

plugins: [
      {src: '~plugins/vue-notifications.js', ssr: true},
     {src: '~plugins/vue-select.js', ssr: false}
     ] 

[shentao]

@sagalbot thanks, Jeff!
After the recent beta release, vue-multiselect should be working with SSR. This was the reason why the CSS was extracted into a separate file, as it was causing troubles during SSR.
There are no other problems with SSR that I’m aware of.
@tenjojeremy Could you please provide some more details so we can investigate the problem with hydration inside the issue you created? https://github.com/monterail/vue-multiselect/issues/340

[lmj0011]

Basically now you can specify at the time you import plugins into nuxt.config.js if it is ssr or not, hence not needing the previous if (process.BROWSER_BUILD) {} checks

@irobayna thanks for pointing this out. I can confirm this works in nuxt v0.10.5

[djvonavi]

return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())
invue-select.js
that func broke all ssr

[Coletrane]

I'm getting
vue.runtime.esm.js:574 [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
using Nuxt.js. Solution I'm using right now is <v-select v-if="process.browser"> but that still causes the client and the server html to be out of sync.

[highlabs]

@Coletrane You can use <no-ssr> ... </no-ssr> tags (from Nuxt 1.0.0).

In my case:

plugins/vue-select.js

import Vue from 'vue'
import vSelect from 'vue-select'
Vue.component('v-select', vSelect)

nuxt.config.js

...
  plugins: [
    { src: '~/plugins/vue-select', ssr: false },
  ]
...

select-component.vue

<no-ssr>
  <v-select :options="filteredCat" label="label">
    <template slot="option" slot-scope="option">
        <img v-if="option.menu_thumb" :src="option.menu_thumb" alt="" />
        {{ option.label }}
    </template>
  </v-select>
</no-ssr>

source: https://github.com/nuxt/nuxt.js/issues/1594

[cyanbluezyx]

@Coletrane You can use <no-ssr> ... </no-ssr> tags (from Nuxt 1.0.0).

In my case:

plugins/vue-select.js

import Vue from 'vue'
import vSelect from 'vue-select'
Vue.component('v-select', vSelect)

nuxt.config.js

...
  plugins: [
    { src: '~/plugins/vue-select', ssr: false },
  ]
...

select-component.vue

<no-ssr>
  <v-select :options="filteredCat" label="label">
    <template slot="option" slot-scope="option">
        <img v-if="option.menu_thumb" :src="option.menu_thumb" alt="" />
        {{ option.label }}
    </template>
  </v-select>
</no-ssr>

source: nuxt/nuxt.js#1594

It is working on the development mode, but the component don't working on the product mode(npm run build), how can I solve the problem

[sebaveg]

https://github.com/madmod/nuxt-vue-select

[santicros]

@Coletrane You can use <no-ssr> ... </no-ssr> tags (from Nuxt 1.0.0).
In my case:
plugins/vue-select.js

import Vue from 'vue'
import vSelect from 'vue-select'
Vue.component('v-select', vSelect)

nuxt.config.js

...
  plugins: [
    { src: '~/plugins/vue-select', ssr: false },
  ]
...

select-component.vue

<no-ssr>
  <v-select :options="filteredCat" label="label">
    <template slot="option" slot-scope="option">
        <img v-if="option.menu_thumb" :src="option.menu_thumb" alt="" />
        {{ option.label }}
    </template>
  </v-select>
</no-ssr>

source: nuxt/nuxt.js#1594

It is working on the development mode, but the component don't working on the product mode(npm run build), how can I solve the problem

For me with npm run build it works but the problems is that styles don't load :(
I've tried putting them on my custom css but no luck.

I tried with the module of @sebaveg and it's the same.

[sagalbot]

I'm not sure where the issues are coming from here. If I recall correctly, the original issue with SSR was that the styles were included in the bundle directly. Since 3.0 the styles have been separated out in the bundle. I tested this morning and things seem to be working fine on a default nuxt install.

https://github.com/sagalbot/nuxt-vue-select-test

https://vibrant-payne-efb1ba.netlify.com/