JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<script src="https://unpkg.com/vue-raven"></script>
<script type="text/x-template" id="title-template">
	<h3><slot></slot> {{ version }}</h3>
</script>

<div id="demo">
  <title-component>VueRaven</title-component>
  <button @click="newError" class="btn btn-danger">Launch new Error</button>
</div>

CSS

body {
  font-family: Menlo, Consolas, monospace;
  padding: 20px;
  color: #777;
}


.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  color: #fff;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  border-radius: 4px;
}

.btn-danger {
  background-color: #dc3545;
}

.text-danger {
  color: #dc3545;
  font-size: 14px;
}

JavaScript

// before you click [Launch new Error], set your dsn
Vue.use(VueRaven, {
  dsn: 'https://[email protected]/1338965' // <= your dsn
})

Vue.component('title-component', {
  template: '#title-template'
 })

// boot up the demo
const demo = new Vue({
  el: '#demo',
  methods: {
  	newError() {
      this.$raven.captureException(new Error('Test with new error'))
      alert('Error sent')
    }
  }
})