A VueJS Prototype for logging console output to the component

App.vue

<!--Make sure to install @vue/cli-service-global first-->
<!--Serve this up using `vue serve` at the command line-->
<!--Details here: https://cli.vuejs.org/guide/prototyping.html -->
<template>
  <div>
    <h1>{{name}}</h1>
    <b>Logging To Vue Component? <span>{{logging}}</span></b>
    <br />
    <button @click="testLog">Test Log</button>|<button @click="testWarn">Test Warn</button>|<button @click="toggleLogging">Toggle Logging</button>
    <hr/>
    <p v-for="(log, i) in logs" :key="i" :style="log.style" class="linebreaks" >{{log.message}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Console Log Prototype',
      logs: [],
      o_log: null,
      o_warn: null,
      logging: true
    }
  },
  methods: {
    testLog() {
      var var1 = 'Darren'
      var var2 = 'Jensen'
      console.log('in testLog()')
      console.log('This should be\non a new line')
      console.log(`First name: ${var1}, last name: ${var2}`);
      console.log('string 1', 'string 2', var1, var2)
      console.log(`%c[routeTo] ${var1}`, "color: #00b4e8;")
    },
    testWarn() {
      console.warn('in testWarn()')
    },
    toggleLogging() {
      if(this.logging) {
        // Disable logging
        console.log = this.o_log
        console.warn = this.o_warn
        this.clearLogs();
      } else {
        // Activate logging
        this.overrideLogging();
      }
      this.logging = !this.logging
    },
    clearLogs() {
      this.logs = []
    },
    overrideLogging() {
      let self = this;
      this.o_log = console.log
      this.o_warn = console.warn
      function customLog(...msg) {
        var entry = parseMsgArray(msg)
        self.logs.push(entry)
        self.o_log.apply(console, arguments)
      }
      function customWarn(msg) {
        var entry = {color: 'yellow', message: msg}
        self.logs.push(entry)
        self.o_warn.apply(console, arguments)
      }
      function parseMsgArray(msgArray) {
        var entry;
        if(msgArray[0].includes('%c')) {
          // 2nd param will contain styles to apply
          var applyStyle = msgArray[1]
          var msg = msgArray[0].replace('%c', '')
          entry = {style: applyStyle, message: msg }
        } else {
          entry = {style: {color: 'black', background: 'pink'}, message: msgArray.join(' ')}
        }
        return entry
      }
      console.log = customLog;
      console.warn = customWarn;
    }
  },
  created() {
    this.overrideLogging();
  }
}
</script>

<style scoped>
.linebreaks {
  white-space:pre;
}
</style>