<template>
  <div class="container">
    <libcrowds-viewer
      :task-opts="taskOpts">
    </libcrowds-viewer>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        taskOpts: [
          {
            mode: 'select',
            objective: 'Draw rectangles around stuff'
            tileSource: 'http://www.example.org/image-service/abcd123/info.json',
            target: 'http://example.org/iiif/book1/canvas/p1'
          }
        ]
      }
    }
  }
</script>

<style lang="scss">
  @import "~libcrowds-viewer/dist/scss/libcrowds-viewer.scss";

  // A height must be set on the viewer container.
  .viewer-container {
    margin: 0;
    height: 100vh;
  }
</style>