_vuetifyDebug.md

Vuetify Debug Component

A simple Vue component for debugging $vuetify's breakpoint object, as well as anything else needed for an app.

index.vue

<template lang="pug" src="./template.pug"/>
<script src="./script.js"/>
<style lang="stylus" src="./style.styl"/>

script.js

export default {
  data: () => ({
    enableDebug: process.env.enableDebug,
    toggleDebug: false
  })
}

style.styl

.debug
  position fixed
  top 0
  left 0
  z-index $depth--debug

  +at(3)
    max-width: 50%

  +above(4)
    max-width: 100%

  &__cta,
  &__info
    padding 0.5em 0.66em
    background alpha(black, 80%)
    border-radius 0 0 4px 0
    color white
    font-size 12px
    font-weight $fontWeight-bold
    max-width: 80vw

  .val
    font-weight $fontWeight-light
    margin-left 0.33em

template.pug

a(v-if="enableDebug" @click.stop="toggleDebug = !toggleDebug").debug
  div(v-if="toggleDebug" key="info").debug__info
    div version:
      span.val {{$phood.version}}
    div dimensions:
      span.val {{ $vuetify.breakpoint.width }}x{{ $vuetify.breakpoint.height }}
    div bp:
      span.val {{ $vuetify.breakpoint.name }}
    div $mobileDetect:
      span.val {{ $mobileDetect }}
  div(v-else key="cta").debug__cta
    v-icon(dark small) bug_report