DEV Community: Syazwan

Migrate vue-select to a Vue 3 compatible library

Syazwan — Wed, 07 Oct 2026 03:24:13 +0000

vue-select's stable release (3.20.4) is Vue 2 only. The Vue 3 version has been at 4.0.0-beta.6 since November 2022.

If it's one of the things holding back your Vue 3 upgrade, you can replace it before the upgrade. Swap it while you're still on 2.7, then upgrade Vue later without touching your selects again.

This walkthrough uses Vue Pick, which runs on both 2.7 and 3 with the same props.

Install

npm install vue-pick

// main.js, in place of "vue-select/dist/vue-select.css"
import "vue-pick/style.css"

import { VPick } from "vue-pick/vue2" // while on Vue 2.7
import { VPick } from "vue-pick"      // after the upgrade

When you move to Vue 3, that import path is the only line that changes.

Check what v-model holds

This is the step that causes bugs if you skip it. vue-select puts the whole option object in v-model, unless you pass reduce.

If you use reduce, name the field with value-key:

<!-- before -->
<v-select v-model="countryId" :options="countries" :reduce="(c) => c.id" />

<!-- after -->
<v-pick v-model="countryId" :options="countries" value-key="id" searchable clearable />

If you don't, add value-format="object" so your data keeps the same shape:

<v-pick v-model="country" :options="countries" value-key="id" value-format="object" searchable clearable />

Turn search and clear back on

vue-select is searchable and clearable by default. Vue Pick isn't, which is why both examples above add searchable clearable.

In multiple mode, Vue Pick also stays open after each pick. Add :close-on-select="true" if you want the old behavior.

Plain string options like ["Apple", "Banana"] need to become objects once:

const options = fruits.map((f) => ({ label: f, value: f }))

v-model still holds the plain string.

Letting an agent do the bulk of it

The full prop, event and slot mapping is in the vue-select migration guide. The page also has a prompt you can paste into Claude Code, Cursor or Copilot. It points the agent at a plain-text copy of the guide and leaves a TODO wherever there's no match, instead of guessing.

If you wrap vue-select in your own component, migrate the wrapper first. Every page that uses it moves over at once.

Vue-Select and Vue-Treeselect never got a stable Vue 3 release, so we replaced them

Syazwan — Sat, 03 Oct 2026 09:22:57 +0000

We're moving a large app from Vue 2.7 to Vue 3. Most of it ports over fine. The dropdowns didn't.

The app uses vue-select and vue-treeselect all over the place. vue-select only supports Vue 3 through its 4.0 beta, and the last beta came out in November 2022. vue-treeselect's last release was in October 2019, and it only runs on Vue 2. Neither one could come with us.

There are Vue 3 forks of both, but they're Vue 3 only. We'd still be running the old libraries on 2.7 until the day we switch, then replacing every dropdown at once.

So I wrote Vue Pick, one component that runs on both Vue 2.7 and Vue 3 with the same props. We can replace the old selects now, while still on 2.7, and they keep working after we switch to 3. The only change at that point is the import path, vue-pick/vue2 to vue-pick.

It covers what we used those two libraries for: search, multiselect, and tree select with parent and child checkboxes, including loading children from the server. It has no runtime dependencies. Vue is the only thing it needs.

If you're stuck on the same two libraries, it might save you some time.

https://vue-pick.js.org
https://github.com/syazwanz/vue-pick

How to Remove an Item from an Array in React State

Syazwan — Tue, 11 Jun 2024 07:00:52 +0000

Removing an item from an array in React state is straightforward using the filter method. This method creates a new array without the specified item.

Example

Initial Array:

const arr = [1, 2, 3];

Create a New Array without the Item:

const new_arr = arr.filter((item) => item !== 2);

Result:

console.log(new_arr); // [1, 3]

Implementation in React

State Initialization

The state items is initialized with an array of strings.

const [items, setItems] = useState([
  "Item One",
  "Item Two",
  "Item Three",
  "Item Four",
  "Item Five",
]);

Removing an Item

The removeItem function uses setItems to update the state. It filters out the item to be removed by creating a new array that excludes the specified item.

const removeItem = (itemToRemove) => {
  setItems((prevItem) => prevItem.filter((item) => item !== itemToRemove));
};

Rendering Items

The items are mapped to display each one with a Delete button. Clicking the button triggers removeItem to update the state.

<div className="p-8 flex flex-col gap-4 items-start">
  {items.map((item) => (
    <div key={item} className="text-sm flex border px-2 py-1 items-center">
      <p className="w-32">{item}</p>
      <button
        className="border rounded bg-red-600 p-1 text-slate-200"
        onClick={() => removeItem(item)}
      >
        Delete
      </button>
    </div>
  ))}
</div>

Full code

import { useState } from "react";

export default function App() {
  const [items, setItems] = useState([
    "Item One",
    "Item Two",
    "Item Three",
    "Item Four",
    "Item Five",
  ]);

  const removeItem = (itemToRemove) => {
    setItems((prevItem) => prevItem.filter((item) => item !== itemToRemove));
  };

  return (
    <div className="p-8 flex flex-col gap-4 items-start">
      {items.map((item) => (
        <div key={item} className="text-sm flex border px-2 py-1 items-center">
          <p className="w-32">{item}</p>
          <button
            className="border rounded bg-red-600 p-1 text-slate-200"
            onClick={() => removeItem(item)}
          >
            Delete
          </button>
        </div>
      ))}
    </div>
  );
}

Conclusion

Using the filter method in React allows you to effectively manage and update arrays in the state, ensuring a clean and efficient way to remove items.

How to Prevent Flexbox Items from Stretching to Full Width in Tailwind CSS

Syazwan — Tue, 11 Jun 2024 03:35:45 +0000

If you use flex and flex-col on a parent container, child elements will occupy the full width. This happens because the default value for align-items is stretch.

Why Do Child Elements Stretch?

When align-items is set to stretch, child elements fill the width of the parent container.

Example:

<form className="flex flex-col gap-2">
  <input className="border py-1 px-2" />
  <button className="border px-4 py-1 bg-slate-200">Submit</button>
</form>

In this example, the input, and button elements stretch to fill the width of the <form>.

Solutions

To prevent stretching, use either self-start on child elements or items-start on the parent element.

Option 1: Using `self-start` on Child Elements

The self-start class makes a child element align to the start of the cross axis:

<form className="flex flex-col gap-2">
  <input className="border py-1 px-2 self-start" />
  <button className="border px-4 py-1 bg-slate-200 self-start">
    Submit
  </button>
</form>

Option 2: Using `items-start` on the Parent Element

The items-start class aligns all child elements to the start of the cross axis:

<form className="flex flex-col gap-2 items-start">
  <input className="border py-1 px-2" />
  <button className="border px-4 py-1 bg-slate-200">
    Submit
  </button>
</form>

Wraping Up

Using self-start on child elements or items-start on the parent container prevents flexbox items from stretching to fill the entire width.