## Example
Package: @css-render/vue3-ssr
Last modified: Sun, 05 May 2024 06:36:04 GMT
Version: 0.15.14
License: MIT
Downloads: 91,945
Install
npm install @css-render/vue3-ssr
yarn add @css-render/vue3-ssr
@css-render/vue3-ssr
Example
Server
import { createSSRApp } from 'vue'
import { renderToString } from '@vue/server-renderer'
import { setup } = from '@css-render/vue3-ssr'
// For each request, you need to create a new app
const ssrApp = createSSRApp(App)
const { collect } = setup(ssrApp)
renderToString(ssrApp).then(appHtml => {
const css = collect()
const page = `<!DOCTYPE html>
<html>
<head>${css}</head>
<body><div id="app">${appHtml}</div></body>
</html>`
})
Component
import { defineComponent } from 'vue'
import { useSsrAdapter } from '@css-render/vue3-ssr'
const Child = defineComponent({
setup() {
c("div", {
color: "red",
}).mount({
id: "mount-id",
// It always returns undefined in browser (document === undefined)
ssr: useSsrAdapter(),
});
},
render() {
return h("div", null, "Child");
},
});
Dependencies
@babel/preset-env: ^7.12.17@babel/preset-typescript: ^7.12.17@css-render/eslint-config: 0.0.0@rushstack/eslint-config: ~2.5.1@types/jest: ^27.0.3@vue/server-renderer: ^3.0.11babel-jest: ^27.4.5css-render: ~0.15.14eslint: ~8.5.0jest: ^27.4.5jest-standard-reporter: ~2.0.0typescript: ~4.4.4vue: ^3.2.45
