Head Meta
This plugin provides an easy way to handle head attributes. It uses @unhead/vue under the hood, but simplifies common use cases.
Static Values
export default defineComponent({
setup() {
useHeadMeta({
title: "Home",
description: "This is the home page.",
});
return () => <TApp>...</TApp>;
},
});
Dynamic Values
This is useful when the value is going to change. Use it if you're fetching data from a server, or if you're using use-translate to localize messages.
export default defineComponent({
setup() {
const post = ref<{ name: string; description: string }>();
const meta = createHeadMetaOptions(() => ({
title: post.value?.name,
description: post.value?.description,
}));
useHeadMeta(meta);
onMounted(() => {
// fetch from server and update post
post.value = { name: "My post", description: "My post description" };
});
return () => <div>...</div>;
},
});
Global Values
In your app entry point, you can define global values like app name.
export default defineComponent({
setup() {
useHeadMeta({
name: "My App",
favicon16: "favicon.png",
});
return () => <div>...</div>;
},
});