<div style="width: 400px; height: 400px;">
  <VueAutotyper v-bind:data="autotyper_data"></VueAutotyper>
</div>

<script>

  import VueAutotyper from 'vue-autotyper';

  export default {
    components: {
      VueAutotyper
    },
    data: function() {
      return {
        autotyper_data: {
          view: {
            font: {
              family: 'monospace',
              color: '#ffffff',
              size: '14px'
            },
            text_align: {
              vertical: 'top',
              horizontal: 'left'
            },
            background: {
              color: '#000000'
            }
          },
          timing: {
            typing_speed: 100,
            deleting_speed: 20,
            duration: 3000
          },
          content: [
            {
              text: "> npm install --save vue-autotyper"
            },
            {
              text: "> clear"
            },
            {
              text: "> npm run dev"
            },
            {
              text: "And perfect!",
              view: {
                font: {
                  family: '"Open Sans", sans-serif',
                  color: '#ffffff',
                  size: '30px'
                },
                text_align: {
                  vertical: 'center',
                  horizontal: 'center'
                },
                background: {
                  image: {
                    url: require('@/assets/images/demos/vue-autotyper/1.png'),
                  },
                  layer: {
                    color: '#000000',
                    opacity: 0.5
                  }
                }
              },
              timing: {
                duration: 5000
              }
            }
          ]
        }
      }
    }
  }

</script>