Vue 3 support #1251
Comments
|
I have a repo that depends on vue-select that I've been upgrading to vue 3. I forked vue-select (https://github.com/wolfjagger/vue-select) and upgraded as best I could. Seems to install correctly, and unit tests now pass without too much modification. I don't know the library top-to-bottom, so I didn't comprehensively test manually. I didn't upgrade or remove more packages than necessary, so yarn audit's not great. I did need to install typescript; I think maybe @vue/test-utils needed it? Unfortunately, there is a problem when using this as a dependency. When I import it in another package and try to mount it, it refuses and throws a bunch of warnings, starting with: I don't know why this is; suspect a vue 3 bug. I see a couple of similar error messages on searching, and this seems very relevant: https://forum.vuejs.org/t/vue-3-invalid-vnode-symbol-fragment-when-using-an-external-component-with-a-slot/105448. May be a bug with slots, which the library relies on a lot. Anyway, try it out if you want! And if you know or figure out the "Symbol" bug, please reply. :) |
|
Took me way too long, but found the bug to be from bundling vue into the library. Vue was bundled in, so when the slot was rendered, it used a Fix is just adding |
|
Is there any roadmap on upgrading to Vue 3 compatibility? I see @wolfjagger has a PR with at least a good start on it. Is the library author open to PR's on this? I'd be interested in helping out as I can. Vue 3 is supposed to come off the @next branch by the end of the month, so we should probably get this done sooner than later. That said, December can be a busy month with the holidays so I just want to acknowledge that also. Any indication from the author or someone with merge powers would be appreciated! Love this library. |
|
@josh7weaver in typical fashion, I've been slow to action on the Vue 3 updates mostly because it's a really good opportunity for a bit of ground up rewriting that needs to happen. If I'm going to update for Vue 3, I'd prefer to group as many breaking changes that need to occur as possible into that release. The current focus system has a lot of issues that affect UX and accessibility, and I'd also like to get the component to a place where it manages no internal state – just props and events. This would lower the footprint of the component, while reducing the amount of bugs that props like That said, I don't want the component to fall behind when Vue 3 becomes the norm. I started freelancing full time back in September, so time has been tight. I have a week at the end of the December that I'm not booked on any projects, and as much as I'll be trying to stay off the keyboard then, I'll probably end up taking a look at this. |
|
I've consolidated the existing PRs into #1344 – you can track progress there. I'll release under the |
|
I'm on Vue3 and have NPM pulling I didn't have this issue with the latest Vue2 NPM module, and the line below was committed 9 months ago. Weird. vue-select/src/mixins/pointerScroll.js Line 26 in 3b3ab38 UPDATE: And it looks like that was needed. As mentioned above, this seems to be a random bit of Typescript in a |
|
@Christopher-Hayes that's actually just plain old JavaScript - the new optional chaining operator . It allows you to access deeply nested object properties safely, returning null if it doesn't exist. I think you still need to specify explicit support with Babel https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining |
|
@sagalbot oh, no way! I use it all the time in Typescript, I had no idea it was coming to JavaScript. That's awesome, thanks for the explanation. |
I have the same problem, installing module.exports = {
plugins: [
'@babel/plugin-proposal-optional-chaining',
],
}Error seems to originate from Webpack validating the final output after all loaders: |
|
Hello, I "almost" made it work, I guess, I got that error: I'm using those versions altogether (writing TypeScript here, not JS):
My code is (less the init code, that doesn't matter here): import { createApp } from 'vue'
import vSelect from 'vue-select';
function initAutocomplete(element: HTMLSelectElement): void {
// Prepare a div below our select and hide the existing select
const placeholder = document.createElement("div");
const props = {
value: null as any,
options: [] as any[],
placeholder: element.getAttribute("placeholder"),
// ... a few other options
};
const defaults = [];
for (let opt of (element.options as unknown as HTMLOptionElement[])) {
const value = {label: opt.label, id: opt.value};
props.options.push(value);
if (opt.selected) {
defaults.push(value);
}
}
props.value = defaults;
createApp(vSelect, { props: props }).mount(placeholder);
}Following many links I ended up on: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0020-events-api-change.md which seem to explain that this.$on was removed in Vue3. Everything explodes here when reaching: https://github.com/sagalbot/vue-select/blob/master/src/components/Select.vue#L636 Is there a possible workaround (i.e. avoiding calling this method) by configuration ? Did I wrote something wrong in my code ? Should I wait for a Vue3 compatible version ? Should I fork if I need it quickly ? |
|
@pounard I was getting the same error. Vue-select So, if you run |
|
Every package maintainer should be putting this into their readmes right now: For Vue 3 (WIP):
Suggestion to vue-select maintainers: release this as next on npm so people can just |
|
Thanks @Christopher-Hayes and @terax6669 for answering, I'm trying to find stable components and I'm currently testing @vueform/multiselect which also seem to implement what I need. I'm still in early dev phase of the project I'm working on, so I might re-evaluate this component which seems nice as soon as a @next release exists ! Thanks for everything. |
|
Hey! Got a beginner question here. When i install from the import vSelect from 'vue-select';webpack gives me this error message: What am i doing wrong? |
I had the same issue, I used a workaround, may not be the best way to do it, but it works for me. Use the import below instead of the usual 'vue-select' (but change the pathing to match your directory structure, I just threw it into my |
|
@pounard I was getting the same error. Vue-select 3.11.2 doesn't have any Vue3 compatibility updates, right now everything is on the vue-3-compat branch and there's no NPM release for those changes yet, so if you want Vue3 compatibility you'll have to tell NPM to pull in that specific branch directly from GitHub. I forget the exact syntax of the npm install I used, but this is what I have in my package.json: So, if you run npm rm vue-select, add the line above to your dependencies in your package.json, and then run npm install, it should install this branch. const optionEl = this.$refs.dropdownMenu ? this.$refs.dropdownMenu.children[this.typeAheadPointer] : false Hi I do this last line in my project and that error gone. but now my v-select doesn't show anything at all on project! but I can see the component in the inspect dev tool! |
|
I've installed the Error: I can update the pointerScroll.js directly but I am starting to involve other developers and they are also having to manually update the file as well. Has anybody been able to get the Babel Optional Chaining working? |
|
I'm able to use this branch in my Vue 3 project 👍 . But I don't want its css. In the builds of vue-select the css is extracted to a separate file (I think?) and you have to include it manually according to the docs. But when using the source directly the styling is part of the Select.vue file. How do I configure webpack to ignore that? Can anyone point me in the right direction? I tried to exclude module.exports = {
chainWebpack: (config) => {
config.module.rule('scss').exclude.add(/vue-select/)
},
}But it seems to parse the styling section anyway and then errors out with Can some webpack expert point me in the right direction? :) |
I think that using the build the is the right solution, or you may have to patch your local copy I guess. |
|
@Kalifr use the beta channel for vue-select btw, for anyone overriding default components =>
import vSelect from "vue-select";
vSelect.props.components.default = () => ({
Deselect: CloseIcon, // CloseIcon and CaretDownIcon are vue components with svg inside of them
OpenIndicator: CaretDownIcon,
});Instead of: import vSelect from "vue-select";
vSelect.props.components.default = () => ({
Deselect: {
render: (createElement) => createElement(CloseIcon),
},
OpenIndicator: {
render: (createElement) => createElement(CaretDownIcon),
},
}); |
|
How do you connect it via CDN? I am trying to make it work, but it raises the problem. |
Instead of |
|
Looks like CDN way is not working. using app.component("v-select", VueSelect); Does someone found a fix for it? thank you |
|
@connorshea have you been able to solve it? |
|
@luisfuertes can you provide more details about that error? When does it occur? |
Pretty sure this error is due to not having upgrade vue to |
|
My testing code: Thank you |
|
I have |
|
I want to use vue-select as input with autocomplete. I have set a simple sandbox... https://codesandbox.io/s/frosty-architecture-64qn7?file=/src/App.vue I have list of countries and if the country is not in the list it will add it. The problem is when selecting for ex: "Canada" and click again on input ... it will clear the selected item and open the dropdown (which is the default behavior) I want to be able to edit the selected value (for example "Canda") to change CA or something else ... to work like an standard input text... when click on input to not clear the selected item. It is possible to make this? |
|
@bci24 use |
|
Hi, with vue version updated all work fine, but i have a problem. I am reading this section of doc https://vue-select.org/guide/values.html#getting-and-setting This is my code, i use (extra data, multiple is true) |
|
If i use But if use Example case 1 (works) Example case 2 (Not works) |
|
This is my provisional workaround And on parent |
|
For me the <template>
<div>
<v-select
:options="['Canada', 'United States']"
@input="log($event)"
v-model="val"
></v-select>
{{ val }}
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const val = ref('');
const log = (e) => console.log(e);
</script> |
+1 |
|
You can see my example here. |
The code you provided prompts the same error: |
|
@luisfuertes sorry about that - the docs need to be versioned and updated. The |
|
@sagalbot can i use |
|
@luisfuertes yep! |
|
I'm going to close this issue in favour of #1597 where it's easier to find consolidated information about the |
Hello, I get the same error just by loading the latest vue-select@beta from the CDN vue-select@beta:1 Uncaught TypeError: Cannot read properties of undefined (reading 'createTextVNode')
at vue-select@beta:1:2226
at vue-select@beta:1:22681
at vue-select@beta:1:22687
at vue-select@beta:1:228
at vue-select@beta:1:237Has anyone found a solution for this? |
|
Looks like CDN is not working. I have tried many ways but not luck. |
|
Hey guys, How I call my component: <AnsibleTagsSelect v-model="form.tags"
:playbook-default-tags="selectedPlaybook?.tags"
:selected="selectedPlaybook?.tags"/>Custom select component: <script lang="ts">
import {computed, defineComponent, ref, watch} from "vue";
import vSelect from 'vue-select'
import 'vue-select/dist/vue-select.css';
interface ITag {
label: string
value: string
}
export default defineComponent({
name: 'AnsibleTagsSelect',
emits: ['change'],
components: {vSelect},
props: {
playbookDefaultTags: {
type: Array,
default: []
},
selected: {
type: Array,
default: []
}
},
setup: function (props, {emit}) {
const allAnsibleTags: Array<ITag> = [
{label: 'common', value: 'common'},
{label: 'users', value: 'users'},
{label: 'ssh', value: 'ssh'},
{label: 'firewall', value: 'firewall'},
{label: 'nginx', value: 'nginx'},
{label: 'redis', value: 'redis'},
{label: 'mariadb', value: 'mariadb'},
{label: 'meilisearch', value: 'meilisearch'},
{label: 'php', value: 'php'},
{label: 'nodejs', value: 'nodejs'},
{label: 'supervisor', value: 'supervisor'},
{label: 'laravel', value: 'laravel'},
]
const selected = ref(props.selected)
const filteredTags = computed<Array<ITag>>(() => {
let tags: Array<ITag> = []
allAnsibleTags.forEach((tag) => {
if (props.playbookDefaultTags.includes(tag.value)) {
tags.push(tag)
}
})
return tags
})
watch(selected, () => {
console.log('selected changed', selected.value)
})
watch(filteredTags, () => {
// Reset selected values if filtered tags changed
selected.value = props.selected.map((tag: any) => tag)
console.log('selected.value 2', selected.value)
})
const selectionChanged = (values: Array<string>) => {
selected.value = values
emit('change', values)
}
return {
selected,
filteredTags,
selectionChanged,
}
},
})
</script>
<template>
<v-select :model-value="selected"
:options="filteredTags"
:reduce="item => item.value"
autocomplete="off"
label="label"
multiple
taggable
v-on:update:modelValue="selectionChanged"
></v-select>
</template>Here is the console output: So initially no "playbook" is selected. As soon as I select one, the corresponding tags should be set already as selected and they are, but not being displayed as selected. Maybe you can point me to the solution? I also figured that if I select one, it still appears in the list as selectable. |
and others
Is your feature request related to a problem? Please describe.
It would be great to have a working version for Vue 3.
Describe the solution you'd like
New version with Vue 3 support.
Describe alternatives you've considered
Additional context
At the moment I can't even install the lib:
Edited by @sagalbot: Vue 3 support is available on the
betarelease channel.The text was updated successfully, but these errors were encountered: