Nacho Printing Machine

    TypeScript icon, indicating that this package has built-in type declarations

    2.1.2 • Public • Published


    Vue mixin for Porcupine Web.


    Porcupine is a highly accurate and lightweight wake word engine. It enables building always-listening voice-enabled applications.

    Porcupine wake word models for all major voice assistants (Alexa, Hey Google, Ok Google, and Hey Siri) are available for free (under Apache 2.0)


    This library is compatible with Vue:

    • Vue.js 2.6.11+
    • Vue.js 3.0.0+

    The Picovoice SDKs for Web are powered by WebAssembly (WASM), the Web Audio API, and Web Workers.

    All modern browsers (Chrome/Edge/Opera, Firefox, Safari) are supported, including on mobile. Internet Explorer is not supported.

    Using the Web Audio API requires a secure context (HTTPS connection), except for localhost, for local development.


    Install the package using npm or yarn. You will also need to add one of the @picovoice/porcupine-web-**-worker series of packages for the specific language model:

    E.g. English:

    yarn add @picovoice/porcupine-web-vue @picovoice/porcupine-web-en-worker @picovoice/web-voice-processor


    Porcupine requires a valid Picovoice AccessKey at initialization. AccessKey acts as your credentials when using Porcupine SDKs. You can get your AccessKey for free. Make sure to keep your AccessKey secret. Signup or Login to Picovoice Console to get your AccessKey.


    Import the Porcupine mixin and the Porcupine Web Worker component. When a component adds the porcupineMixin, the variable $porcupine is computed with the following functions:

    • init: initializes Porcupine.
    • start: starts processing audio and detecting keywords.
    • pause: stops processing audio.
    • delete: cleans up used resources.

    In this example we're passing in two keywords: "Grasshopper" and "Grapefruit" with sensitivities 0.65 and 0.4, respectively. The demo maintains an array of detections which is updated every time the Porcupine detects a keyword.

    <script lang="ts">
    import porcupineMixin from "@picovoice/porcupine-web-vue";
    import { PorcupineWorkerFactoryEn } from "@picovoice/porcupine-web-en-worker";
    export default {
      name: "VoiceWidget",
      mixins: [porcupineMixin],
      data: function() {
        return {
          detections: [] as string[],
          isError: false,
          isLoaded: false,
          factory: PorcupineWorkerFactoryEn,
          factoryArgs: {
            accessKey: '${ACCESS_KEY}', // AccessKey obtained from Picovoice Console(
            keywords: [
              { builtin: 'Grasshopper', sensitivity: 0.5 },
              { builtin: 'Grapefruit', sensitivity: 0.6 },
      async created() {
        await this.$porcupine.init(
          this.factoryArgs,     // Porcupine factory arguments
          this.factory,         // Porcupine Web Worker component
          this.ppnKeywordFn,    // Callback invoked after detection of keyword
          this.ppnReadyFn,      // Callback invoked after loading Porcupine
          this.ppnErrorFn       // Callback invoked in an error occurs while initializing Porcupine
      methods: {
        start: function () {
          if (this.$porcupine.start()) {
            this.isListening = !this.isListening;
        pause: function () {
          if (this.$porcupine.pause()) {
            this.isListening = !this.isListening;
        ppnReadyFn: function() {
          this.isLoaded = true;
        ppnKeywordFn: function(data: string) {
          this.detections = [...this.detections, data.keywordLabel];
        ppnErrorFn: function(error: Error) {
          this.isError = true;
          this.errorMessage = error.toString();

    Custom wake words

    Each language includes a set of built-in keywords. The quickest way to get started is to use one of those. The builtin keywords are licensed under Apache-2.0 and are completely free to use.

    Custom wake words are generated using Picovoice Console. They are trained from text using transfer learning into bespoke Porcupine keyword files with a .ppn extension. The target platform is WebAssembly (WASM), as that is what backs the Vue library.

    The .zip file contains a .ppn file and a _b64.txt file which contains the binary model encoded with Base64. Copy the base64 and provide it as an argument to Porcupine as below. You will need to also provide a label so that Porcupine can tell you which keyword occurred ("Deep Sky Blue", in this case):

    factoryArgs: {
      accessKey: 'AccessKey obtained from Picovoice Console(',
      keywords: [
        { custom: base64: '/* Base64 representation of deep_sky_blue.ppn */', custom: 'Deep Sky Blue', sensitivity: 0.65 },

    You may wish to store the base64 string in a separate JavaScript file and export it to keep your application code separate.


    npm i @picovoice/porcupine-web-vue

    DownloadsWeekly Downloads






    Unpacked Size

    636 kB

    Total Files


    Last publish


    • iliadrm
    • erismikpico
    • kyeo
    • dynamix70
    • kenarsa
    • ilavery