# 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
`;