Vue3 ライブラリ「smart-tagz」を使用してタグ入力を実装する

ライブラリ「smart-tagz」を使用して、タグ入力を実装することが可能です。ここでは、smart-tagzを利用するための手順と簡単な使い方を記述してます。

1. 環境
2. Vue3環境構築
3. smart-tagzインストール
4. smart-tagz使い方
5. 起動

環境

OS windows10 64bit
vue 3.0.0
node v14.6.0
yarn 1.22.10
@vue/cli 4.5.9

Vue3環境構築

vue-cliを使用して構築してます。

npm install -g @vue/cli

npm init

vue upgrade --next

## vueappというプロジェクトを作成
vue create vueapp

cd vueapp

npm install -g @vue/cli

npm init

vue upgrade --next

## vueappというプロジェクトを作成

vue create vueapp

cd vueapp

smart-tagzインストール

yarnを使用して、インストールします。

yarn add smart-tagz

1	yarn add smart-tagz

yarnがインストールされていない場合は、以下のコマンドでインストール可能です。

npm install -g yarn

1	npm install -g yarn

smart-tagz使い方

src配下のApp.vueを下記のように編集します。

<template>
  <div class="container">
  <smart-tagz
    autosuggest
    editable
    inputPlaceholder="Select Countries ..."
    :sources="sources"
    :allowPaste="{delimiter: ','}"
    :allowDuplicates="false"
    :maxTags="20"
    :defaultTags="['javascript', 'node.js', 'vue.js']"
  />
  </div>
</template>

<script>
import { SmartTagz } from "smart-tagz";
import "smart-tagz/dist/smart-tagz.css";

import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
  components: {
    SmartTagz,
  }
});

</script>
<style>
.container {
  margin: 0 auto;
  margin-top: 200px;
  min-height: 100vh;
  width: 500px;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>
<style src="@vueform/multiselect/themes/default.css"></style>