# Title

Reactive Document.title (opens new window).

# Parameters

import { useTitle } from "vue-composable";

const title = useTitle(newTitle?);
Parameters Type Required Default Description
newTitle String false undefined Overrides document.title

# State

The useTitle function exposes the following reactive state:

import { useTitle } from "vue-composable";

const title = useTitle();
State Type Description
title Ref<String> Ref for document.title, watches for document.title changes or set to update the title

# Example

# Code

    <label for="title-updater">document.title:</label>
    <input name="title-updater" v-model="title" />
import { defineComponent } from "@vue/composition-api";
import { useTitle } from "vue-composable";

export default defineComponent({
  setup() {
    const title = useTitle();
    return {


SSR only supported for vue3, you can also make it work with vue2.

useTitle can also be used in a SSR setup.

When in SSR it won't try to change the document.title instead it will use a single ref across the render process.


To use SSR you need to define process.env.SSR:'true'

# example

import { provideSSRTitle } from "vue-composable";

const app = createSSRApp(App);
const title = provideSSRTitle(app, "Awesome app");
// setup stuff
const appContent = await renderToString(app);

return `
  <div id="app">