0.0.40 • Published 12 days ago
@fy-/head v0.0.40
@fy-/head
Simple head manager for Vue3/Vite (supports SSR) inspired by @vueuse/head.
Install
npm i @fy-/head
Load Vue Plugin
import {
createFyHead
} from '@fy-/head';
export const createApp = async (isSSR = false) => {
//...
const fyhead = createFyHead();
app.use(fyhead);
//...
return {
app,
router,
head: fyhead,
pinia
};
};
Usage
import {
useFyHead
} from '@fy-/head';
// Simple
useFyHead({
title: computed(() =>
computedRoute.value.meta.title ? computedRoute.value.meta.title : 'fyvue'
),
metas: [{
property: 'og:type',
content: 'website',
},
{
property: 'og:image',
content: 'https://fy-vue.com/fyvue.png',
},
{
name: 'twitter:image',
content: 'https://fy-vue.com/fyvue.png',
},
],
});
// Script example
useFyHead({
scripts: [{
src: 'https://js.stripe.com/v3',
id: 'stripe-script',
}, ],
});
// Fully reactive example (in this example "seo" is a Ref)
useFyHead({
title: computed(() => seo.value.title),
links: computed(() => {
const _res: Array < any > = [];
if (initial && getMode() == 'ssr') {
_res.push({
rel: 'canonical',
href: `${getUrl().scheme}://${getUrl().host}${getUrl().path}`,
key: 'canonical',
});
}
if (seo.value.prev) {
_res.push({
rel: 'prev',
href: seo.value.prev,
key: 'prev',
});
}
if (seo.value.next) {
_res.push({
rel: 'next',
href: seo.value.next,
key: 'next',
});
}
return _res;
}),
//...
});
SSR Example
async function handleSSR(
createApp: Function,
cb: Function,
options: SSROptions = {}
) {
const {
app,
router,
head,
pinia
} = await createApp(true);
//...
const {
headTags,
htmlAttrs,
bodyAttrs,
bodyTags
} = head.renderHeadToString();
//... (fyhead onlysupports headTags for now, htmlAttrs,bodyAttrs & bodyTags are empty for now.
}
0.0.40
12 days ago
0.0.38
7 months ago
0.0.39
7 months ago
0.0.36
7 months ago
0.0.37
1 year ago
0.0.32
1 year ago
0.0.33
1 year ago
0.0.34
1 year ago
0.0.35
1 year ago
0.0.31
1 year ago
0.0.30
1 year ago
0.0.29
1 year ago
0.0.28
1 year ago
0.0.27
1 year ago
0.0.26
1 year ago
0.0.25
1 year ago
0.0.22
1 year ago
0.0.21
1 year ago
0.0.20
1 year ago
0.0.19
1 year ago
0.0.18
1 year ago
0.0.17
1 year ago
0.0.16
1 year ago
0.0.15
1 year ago
0.0.14
1 year ago
0.0.13
1 year ago
0.0.12
1 year ago
0.0.11
1 year ago
0.0.1
1 year ago
0.0.1-alpha.3
1 year ago
0.0.1-alpha.2
1 year ago
0.0.1-alpha.1
1 year ago