Vue.jsベースのフレームワーク！ Nuxt.jsプラグイン《vue-word-highlighterで文字のハイライト実装》

#Nuxt.js #Vue.js

記事をシェア：

コピー

こんにちは、樋口です。

今回はNuxt3で文字のハイライト表現が簡単にできる「vue-word-highlighter」についてご紹介します。簡単に文字列の出力と、対象とする文字列のハイライト処理を実現できるので、是非ご覧ください。

使用するライブラリ

今回は下記ライブラリを使用して説明します。

Vue.js: 3.4.21
Nuxt.js: 3.11.1
vue-word-highlighter: 1.2.4

vue-word-highlighterの追加

初めにコマンドプロンプトで、使用するNuxt.jsのプロジェクトフォルダまで移動します。移動後、以下のコマンドを実行します。

npm install vue-word-highlighter

これで対象のプロジェクトに、ライブラリを追加することができました。

次に実際のライブラリの使用方法について解説していきます。

プロジェクト構成

今回は下記のプロジェクト構成で作業を行っていきます。

Vueファイル

今回サンプル用に作成した、Vueファイルを下記に記載します。

– index.vue

<template>
    <div style="margin-left: 20px;">
        <h2>vue-word-highlighterサンプル</h2>
        <WordHighlighter :query="data.query" splitBySpace="true">
            {{ data.text }}
        </WordHighlighter>
    </div>
</template>
<script setup>
import WordHighlighter from "vue-word-highlighter"

const data = reactive({
    text: 'vue3で「vue-word-highlighter」を使用するサンプルです。',
    query: 'vue word'
})
</script>

４行目～６行目：
ハイライトを行う文字列と、ハイライト対象の文字の指定を行っています。「query」には、ハイライト対象とする文字列の指定を行います。「splitBySpace」を「true」に設定することで、「query」の文字列を「A B」のようにスペース指定することで、複数件のハイライト文字の指定が可能となります。

５行目には出力する文字列をタグ内部で指定して表示を行います。

１０行目：
使用する「vue-word-highlighter」ライブラリのインポートを実施います。

１２行目～１５行目：
ここでは変数として表示する文字列や、検索文字列の管理を行っています。

上記以外の詳しいオプション設定については、下記リンクよりご確認ください。
GitHub – vue-word-highlighter –