@tanstack/vue-router
Version:
Modern and scalable routing for Vue applications
36 lines (35 loc) • 1.16 kB
JavaScript
import { useHydrated } from "./ClientOnly.js";
import { Asset } from "./Asset.js";
import { useTags } from "./headContentUtils.js";
import * as Vue from "vue";
//#region src/HeadContent.dev.tsx
var DEV_STYLES_ATTR = "data-tanstack-router-dev-styles";
/**
* @description The `HeadContent` component is used to render meta tags, links, and scripts for the current route.
* It should be rendered in the `<head>` of your document.
*
* This is the development version that filters out dev styles after hydration.
*/
var HeadContent = Vue.defineComponent({
name: "HeadContent",
props: { assetCrossOrigin: {
type: [String, Object],
default: void 0
} },
setup(props) {
const tags = useTags(props.assetCrossOrigin);
const hydrated = useHydrated();
Vue.onMounted(() => {
document.querySelectorAll(`link[${DEV_STYLES_ATTR}]`).forEach((el) => el.remove());
});
return () => {
return (hydrated.value ? tags().filter((tag) => !tag.attrs?.[DEV_STYLES_ATTR]) : tags()).map((tag) => Vue.h(Asset, {
...tag,
key: `tsr-meta-${JSON.stringify(tag)}`
}));
};
}
});
//#endregion
export { HeadContent };
//# sourceMappingURL=HeadContent.dev.js.map