vue-guacamole-client/src/components/GuacClientManager.vue

<template>
  <div class="managed-client" >

    <guac-client ref="client" :connectionID="connectionID" >
      <div slot='header' class="rows">
        <div class="btn btn-default" @click="setViewState('thumbnail')">Thumbnail</div>
        <div class="btn btn-default" @click="setViewState('full')">Full</div>
        <div class="btn btn-default" @click="setViewState('fullscreen')">Fullscreen</div>
      </div>
      <div slot='footer' class="rows">
        <h4>Footer Stuff
          <div class="small pull-right">Important stuff that belongs in the footer</div>
        </h4>
      </div>
    </guac-client>


    <!--<guac-footer @viewStateChange="setViewState"/>-->
  </div>
</template>

<script>

  import GuacClient from './GuacClient'


  export default {
    components: {GuacClient},
    props: ['connectionID'],
    name: 'GuacClientManager',
    methods: {
      setViewState(state) {
        this.$refs.client.setViewState(state)
        // this.viewState = state
        // if (this.viewState == 'fullscreen'){
        //   this.$refs.client.fullscreen()
        // }
      }
    }
  }
</script>

<style scoped>
  .managed-client {
    padding: 0px;
    /*margin: 10px;*/
  }
  /*.rows{*/
  /*background-color: red;*/
/*}*/
</style>