How do I set up an alert in Vue.js when using a different browser?

Question

<template>
  <div>
    <v-alert type="warning">
      Website displays better in Chrome
    </v-alert>
  </div>
</template>

I am new to Vue and I want to notify the user only when using IE that there might be issues with the page. If the user uses Chrome then no alert will appear.

Answer 1

Add a new props to v-alert component :value="boolean"

<template>
  <div>
    <v-alert type="warning" :value="isIE">
      Website displays better in Chrome
    </v-alert>
  </div>
</template>

Inside computed add a new function to check whether the current browser is IE or not:

computed: {
    isIE: function () {
      userAgent = navigator.userAgent;
      return userAgent.indexOf("MSIE ") > -1 || userAgent.indexOf("Trident/") > -1 || userAgent.indexOf("Edge/") > -1;
    }
}