MADE Vue - ChipBox

A Vue 3 chip/tag input component, a UI component for allowing multiple value input.

Usage

To customise the chip box layout, you'll want to import the scss styling:

import "made-vue-chipbox/styles.scss";

In your main file, you can import the component:

import { createApp } from "vue";
import App from "./App.vue";

import ChipBox from "made-vue-chipbox";

const app = createApp(App);
...
app.use(ChipBox);
...
app.mount("#app");

You can then reference the chip box layout component in your app:

<template>
  <div>
    <m-chip-box
      :chips="chips"
      :chipExpr="(chip) => chip.content.text"
      @change="onChipsChanged"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
  data() {
    return {
      chips: [
        {
          content: { text: "United Kingdom" },
        },
      ],
    };
  },
  methods: {
    onChipsChanged(chips: ChipItem[]) {
      this.chips = chips;
    },
  },
});
</script>