# Guide

← Demo

Vuepress Text To Speech Plugin allows you to create a renderless component that reads aloud the text content on the page.

Renderless components

As the name implies, these components do not render any HTML output, but rather just act as a logic wrapper for the inner components.

Important

This plugin only works with Vuepress 1.x.

# How it works

The plugin performs some basic DOM queries to collect the text content (including the headings, paragraphs and lists) on the page, and uses the SpeechSynthesis API (opens new window) to read aloud the collected text.

# Installation

Define the plugin in config.js:

// config.js
module.exports = {
  ...
  plugins: [
    ['text-to-speech', { contentSelector: '.content__default' }]
  ]
}

The contentSelector option can be defined globally here or locally with the component props.

# Usage

After the above steps, a <text-to-speech> component will be accessible anywhere in your project. To use it, wrap it around the control element:

<text-to-speech #default="{ toggle }">
  <button @click="toggle">Toggle text-to-speech mode</button>
</text-to-speech>

Through the default slot, the component exposes a single toggle function that can be used by the control element to trigger on/off the text-to-speech mode on the current page.

For more options, refer to the complete API Reference.