Cannot use import statement outside a module about multiselect HOT 15 CLOSED

This is nuxtJS specific. If you want to add a NuxtJS example, here's how I fixed it:

in nuxt.config.js
{ src: '~/plugins/vue-stack-grid', mode: 'client' }

in plugins/multiselect.js

import Vue from 'vue'
import Multiselect from '@vueform/multiselect/dist/multiselect.vue2.js'
Vue.component('VMultiselect', Multiselect)

In the component

  <client-only>
    <v-multiselect v-model="value" :options="options" />
  </client-only>

from multiselect.

I made it work by adding this to the nuxt config:

  build: {
    transpile: [
      '@vueform/multiselect/dist/multiselect.vue2.js',
    ],
  },

from multiselect.

I used Nuxt multiselect

from multiselect.

The same for Quasar Framework. To fix this error, I have to add @vue-form/multiselect to build/transpileDependencies in quasar.conf.js:

module.exports = configure(function (ctx) {
	return {
		// …
		build: {
			// …
			transpileDependencies: [
				'@vueform/multiselect'
			],
			// …
		},
	// …
}

(Quasar v2 in my case)

from multiselect.

This didn't end up working in Nuxt. I was getting errors about infinite loops so I had to try and find another plugin. I love what you did though with composition, it's so clean. Any interest in ensuring this works with Nuxt and Vue2?

from multiselect.

I've created a section with Nuxt.js usage:
https://github.com/vueform/multiselect#using-with-nuxtjs

It works on a fresh install with this setup. If it's still not ok on your end please share your nuxt.config.js.

from multiselect.

Feel free to reopen if you still have issue with this.

from multiselect.

It's still not working and this seems like the cleanest select plugin out there by far!

Here's my config:
https://gist.github.com/jnarowski/a740922bba3d9d1127ae239530773eaa

from multiselect.

I recreated with a fresh nuxt install.

Here's the code for it:
https://drive.google.com/file/d/12_r3SknguGWhaqvb2zwFTobo44wwcq5l/view?usp=sharing

Codesandbox was having issues getting the right Nuxt up and running. I'd love to use this if we can figure out what's going on. Maybe in the rollup settings?

from multiselect.

Can we re-open this or should I create a new issue since it's still there?.

from multiselect.

Hi 👋 this issue has been automatically marked as stale 📌 because it has not had recent activity 😴. It will be closed if no further activity occurs.

from multiselect.

Hi again 👋 we would like to inform you that this issue has been automatically closed 🔒 because it had not recent activity during the stale period.

from multiselect.

Can we get this fixed?

from multiselect.

I think this should be opened again, bug is still there, no way to make it work with nuxt

from multiselect.

With vue-cli the recommendation seems to be to adjust the transformIgnorePatterns in your jest.config.js file.

module.exports = {
	// ...
	transformIgnorePatterns: ["/node_modules/(?!@vueform/multiselect)"],
}

This way testing the multiselect with testing-library/vue works.

from multiselect.