vue-composable

# 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

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

export default defineComponent({
  setup() {
    const title = useTitle();
    return {
      title
    };
  }
});
</script>

# SSR

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.

WARNING

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 `
<html>
  <head>
    <title>${title.value}</title>
  </head>
  <div id="app">
    ${appContent}
  </div>
</html
`;

← Timeline →