title: Vue.js webkitSpeechRecognition integration
body: <p>I need to connect webkitSpeechRecognition to my Vue.js project (for Chrome).</p>
  
  <p>I'm trying to insert code into component</p>
  
  <pre><code>&lt;template&gt;
        &lt;div class="voice"&gt;
          &lt;h1&gt;{{ msg }}&lt;/h1&gt;
          &lt;button v-on:click="greet"&gt;Speak&lt;/button&gt;
        &lt;/template&gt;
  
        &lt;script&gt;
        export default {
          name: 'voice',
          data () {
            return {
              msg: 'Speak',
            }
          },
          methods: {
            greet: function (event) {
  
            }
          }
        }
        &lt;/script&gt;
  </code></pre>
  
  <p>this code</p>
  
  <pre><code>var recognition = new (SpeechRecognition || webkitSpeechRecognition || mozSpeechRecognition || msSpeechRecognition)();
  recognition.lang = 'en-US';
  recognition.interimResults = false;
  recognition.maxAlternatives = 5;
  recognition.start();
  
  recognition.onresult = function(event) {
      console.log('You said: ', event.results[0][0].transcript);
  };
  </code></pre>
  
  <p>but i have error "webkitSpeechRecognition is not defined"</p>