import App from "./App.vue" ; import viteSSR from "vite-ssr" ; import { createHead } from "@vueuse/head" ; import routes from "virtual:generated-pages" ; import Chakra , { chakra } from "@chakra-ui/vue-next" ; import { hydrate } from "@emotion/css" ; import { domElements } from "@chakra-ui/vue-system" ; import { extractCritical } from "@emotion/server" ; param html param ids param css const injectCritical = ( html , ids , css ) => html . replace ( "</title>\n" , `</title>\n<script>window.$emotionSSRIds=${ JSON . stringify ( ids ) }</script>\n` ) . replace ( "</head>\n" , `<style>${ css }</style>\n</head>\n` ) ; export default viteSSR ( App , { routes } , ( { app , isClient } ) => { if ( isClient ) { const ssrIds = window ?. $emotionSSRIds || [ ] ; hydrate ( ssrIds ) ; } const head = createHead ( ) ; app . use ( head ) ; console . log ( { app } ) ; /** Extract critical styles */ app . use ( Chakra ) ; domElements . forEach ( ( tag ) => { app . component ( `chakra.${ tag }` , chakra ( tag ) ) ; } ) ; } ) ;