Build a Vue.js 3 Word & Text Annotation Highlighter Component Using vue-highlight-words in TS

npm i vue-highlight-words

App.vue

<template>
  <div id="app">
    // attrs on component are applied to the wrapper
    <Highlighter class="my-highlight" :style="{ color: 'blue' }"
      highlightClassName="highlight"
      :searchWords="keywords"
      :autoEscape="true"
      :textToHighlight="text"/>
  </div>
</template>

<script>
import Highlighter from 'vue-highlight-words'

export default {
  name: 'app',
  components: {
    Highlighter
  },
  data() {
    return {
      text: 'The dog is chasing the cat. Or perhaps they\'re just playing?',
      words: 'and or the dog'
    }
  },
  computed: {
    keywords() {
      return this.words.split(' ')
    }
  }
}
</script>

// attrs on component are applied to the wrapper

<Highlighter class="my-highlight" :style="{ color: 'blue' }"

highlightClassName="highlight"

:searchWords="keywords"

:autoEscape="true"

:textToHighlight="text"/>

</div>

</template>

import Highlighter from 'vue-highlight-words'

export default {

name: 'app',

components: {

Highlighter

data() {

return {

text: 'The dog is chasing the cat. Or perhaps they\'re just playing?',

words: 'and or the dog'

}

computed: {

keywords() {

return this.words.split(' ')

}

</script>

Build a Vue.js 3 Word & Text Annotation Highlighter Component Using vue-highlight-words in TS

Comments

Leave a Reply Cancel reply

Archives