### Install Vue-Writer via NPM

Source: https://github.com/quelchx/vue-writer/blob/master/readme.md

This snippet provides the command to install the Vue-Writer component using npm, a package manager for JavaScript. It's the recommended way to add the component to a Vue project.

```bash
npm install vue-writer
```

--------------------------------

### Example Usage of Globally Registered Vue-Writer in App.vue

Source: https://github.com/quelchx/vue-writer/blob/master/readme.md

This Vue template and script example demonstrates how to use the globally registered Vue-Writer component in an App.vue file. It shows how to pass an array of strings to the component for typing simulation.

```html
<template>
  <VueWriter :array="arr" />
</template>

<script>
  export default {
    data() {
      return { arr: ["Hello", "From", "Vue Writer"] };
    },
  };
</script>
```

--------------------------------

### Vue-Writer Component Slots API

Source: https://github.com/quelchx/vue-writer/blob/master/readme.md

This section describes the slot functionality of the Vue-Writer component, allowing content to be passed into the component. The provided example demonstrates how to render child HTML content before the typing animation begins.

```APIDOC
Slot:
  usage: <vue-writer array='["World"]'>
  <p>Hello</p>
</vue-writer>
  note: the children being passed will always come before the typewriter animation/effect.
```

--------------------------------

### Custom Styling for Vue-Writer Component

Source: https://github.com/quelchx/vue-writer/blob/master/readme.md

This CSS snippet provides examples of class selectors that can be targeted to apply custom styling to the Vue-Writer component. It includes styles for the typed text, cursor, and underscore caret, along with a blinking animation.

```css
.is-typed {
  font-family: 'Monaco';
}
.is-typed span.typed {
  colour: black;
}
.is-typed span.cursor {
  display: inline-block;
  width: 3px;
  background-color: black;
  animation: blink 1s infinite;
}
.is-typed span.underscore {
  display: inline-flex;
  width: 10px;
  height: 1px;
  align-items: flex-end;
  background-color: black;
  animation: blink 1s infinite;
}
.is-typed span.cursor.typing {
  animation: none;
}
@keyframes blink {
  49% {
    background-color: black;
  }
  50% {
    background-color: transparent;
  }
  99% {
    background-color: transparent;
  }
}
```

--------------------------------

### Vue-Writer Component Properties API

Source: https://github.com/quelchx/vue-writer/blob/master/readme.md

This section details the various properties available for the Vue-Writer component, including their types, requirements, default values, and usage examples. These properties control the behavior of the typing and erasing animation.

```APIDOC
Property: array
  type: Array
  required: true
  usage: <vue-writer :array="['adding single string soon']" />
  note: this prop has to be in an array even if it's a single string.

Property: iterations
  type: Number
  required: false
  default: 0
  usage: <vue-writer :array="['Hello', 'World']" :iterations="'1'"></vue-writer>
  note: By default, this will loop forever unless you specify. This will loop through the array depending on the value you set.

Property: typeSpeed
  type: Number
  default: 200
  required: false
  usage: <vue-writer :array="arr" :typeSpeed="70" />
  note: higher the number the slower the typing speed is.

Property: eraseSpeed
  type: Number
  default: 100
  required: false
  usage: <vue-writer :array="arr" :eraseSpeed="50" :typeSpeed="100" />
  note: this prop controls how fast each character is erased in second intervals.

Property: delay
  type: Number
  default: 2000
  required: false
  usage: <vue-writer :array="arr" :eraseSpeed="50" :typeSpeed="100" :delay="1000" />
  note: 1000 = 1 second - the delay prop controls how long the current word in the array will appear on the screen before it deletes and begins typing the next word.

Property: intervals
  type: Number
  default: 500
  required: false
  usage: <vue-writer :array="arr" :delay="1000" :intervals="200" />
  note: this prop controls how long the next word in the array will appear after the previous word is fully erased.

Property: start
  type: Number
  default: 0
  required: false
  usage: <vue-writer :array="arr" :delay="1000" :start="2000" />
  note: this prop is used to control when the animation should begin. By default when the component is loaded on the page, the animation will start.

Property: caret
  type: String
  default: 'cursor'
  required: false
  options: 'cursor', 'underscore'
  usage: <vue-writer :array="arr" :caret="underscore" />
  note: this prop changes the style of the caret (more options coming soon)
```

--------------------------------

### Include Vue-Writer via CDN

Source: https://github.com/quelchx/vue-writer/blob/master/readme.md

This HTML snippet demonstrates how to include the Vue-Writer component directly from a CDN. This method is suitable for quick prototyping or environments where a build step is not desired.

```html
<script
  src="https://cdn.jsdelivr.net/npm/vue-writer@1.0.7/dist/vue-writer.esm.js"
  integrity="sha256-mirxvAV/+LwGipr5mQVYEU3cpP15soM1I7nz97ckwbQ="
  crossorigin="anonymous"
></script>
```

--------------------------------

### Locally Register and Use Vue-Writer in App.vue

Source: https://github.com/quelchx/vue-writer/blob/master/readme.md

This Vue component snippet illustrates how to locally register and use the Vue-Writer component within a single component file. It demonstrates importing `VueWriter` and declaring it in the `components` option, then using it in the template with a simple array prop.

```html
<template>
  <VueWriter :array="['Hello World']" />
</template>
<script>
import {VueWriter} from 'vue-writer'
export default {
  components: {VueWriter}
}
</script>
```

--------------------------------

### Globally Register Vue-Writer in main.js

Source: https://github.com/quelchx/vue-writer/blob/master/readme.md

This JavaScript snippet shows how to globally register the Vue-Writer component in a Vue 3 application's main.js file. By using `app.use(VueWriter)`, the component becomes available throughout the entire application without explicit imports in individual components.

```javascript
import { createApp } from "vue";
import App from "./App.vue";
import VueWriter from "vue-writer";
createApp(App).use(VueWriter).mount("#app");
```

--------------------------------

### Vue-Writer Component Emits API

Source: https://github.com/quelchx/vue-writer/blob/master/readme.md

This section outlines the events emitted by the Vue-Writer component. The `typed` event is emitted when a word has been fully typed, providing the typed word as its payload.

```APIDOC
Emit: typed
  type: String
  usage: <vue-writer :array="arr" @typed="onTyped" />
  note: this event will emit the current word that has been typed.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.