Vue: Sexy debug

debug.vue

<template lang="pug">
  a(v-if="enabled" @click.stop="toggleDebug = !toggleDebug").debug
    div(v-if="toggleDebug").debug__info
      h2 Debug
      template(
        v-for="(obj, objKey) in debugThese"
      )
        hr
        v-layout(row wrap).obj
          v-flex(xs12).obj__key {{ objKey }}
          v-flex(
            v-if="typeof item !== 'function'"
            v-for="(item, key) in obj"
            :key="`${objKey}-${key}`"
            xs12 md6 lg4 xl3
          ).obj__item.item
            span.item__key {{ key }}:&nbsp;
            span.item__val {{ item }}
    div(v-else key="cta").debug__cta
      v-icon(dark small) bug_report
</template>

<script>
import siteConfig from '@/mixins/siteConfig';

export default {
  mixins: [
    siteConfig
  ],
  data: () => ({
    enabled: process.env.debug,
    toggleDebug: false,
    window: null,
  }),
  computed :{
    debugThese() { return {
      'siteConfig': this.siteConfig,
      '$vuetify.breakpoint': this.$vuetify.breakpoint,
      'window.location': this.window && this.window.location,
      '$device': this.$device,
      // '$route': this.$route,
    };}
  },
  mounted() {
    this.window = window;
  },
}
</script>

<style lang="scss" scoped>
.debug {
  position: fixed;
  top: 0;
  left: 0;
  z-index: depth(debug);

  &__cta,
  &__info {
    padding: 0.5em 0.66em;
    background: rgba(black, 0.8);
    border-radius: 0 0 4px 0;
    color: white;
    font-size: 12px;
    font-weight: bold;
  }

  &__info {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }

  hr {
    margin: 0.5rem 0;
    padding: 0;
    border: none;
    border-top: 1px solid rgba(white, 0.1);
  }
}

@include b('obj') {
  margin-bottom: 1rem;

  @include e('key') {
    color: pink;
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
  }
  @include e('item') {
    font-weight: 100;
    padding-left: 0.5rem;
  }
}

@include b('item') {
  margin-bottom: 0.5rem;

  @include e('key') {
    font-weight: bold;
  }
}
</style>