vue.js3でタグ付け[vue3-tags-input]

環境

---

フレームワーク	バージョン
Laravel Framework	9.30.1
Vue.js	3.2.36

インストール

---

npm install vue3-tags-input --save-dev

使い方

---

SFCを用意

resources/js/components/TagInput.vue

<template>
  <input
      type="hidden"
      name="tags"
      :value="tagsJson"
  >
  <vue3-tags-input :tags="tags"
	  placeholder="タグを入力して下さい"
	  @on-tags-changed="newTags => tags = newTags"
  />
</template>
<script>
  import { defineComponent } from 'vue';
  import Vue3TagsInput from 'vue3-tags-input';

  export default defineComponent({
  components: {
      Vue3TagsInput
  },

  data() {
      return {
          tags: ['Laravel', 'VUE']
      }
  },
  computed: {
    tagsJson() {
      return JSON.stringify(this.tags)
    },
  }
})
</script>

SFC読み込み

resources/js/app.js

import TagsInput from './components/TagsInput.vue'

const app = createApp({
    components: {
        TagsInput,
    }
});
app.mount('#app');

baladeで適用

resources/views/index.blade.php

<tags-input>
</tags-input>

結果

---