epicmaxco · m0ksem · Jun 22, 2022 · May 17, 2022 · May 17, 2022 · May 20, 2022
diff --git a/packages/docs/src/components/sidebar/navigationRoutes.ts b/packages/docs/src/components/sidebar/navigationRoutes.ts
@@ -55,6 +55,10 @@ export const navigationRoutes: NavigationRoute[] = [
           badge: 'new',
         },
       },
+      {
+        name: 'ssr-guide',
+        displayName: 'menu.ssrGuide',
+      },
       // GENERATOR_ADD - gettingStarted
     ],
   },

diff --git a/packages/docs/src/locales/en/en.json b/packages/docs/src/locales/en/en.json
@@ -1026,7 +1026,6 @@
         "parse": "Function that transforms input field text to date, date array or date period",
         "parseDate": "Function that transforms input field text to date",
         "parseValue": "Function that transforms string value to date, date array or date period"
-
       },
       "events": {
         "clear": "Emitted if select value has been cleared",
@@ -1356,7 +1355,8 @@
     "carousel": "Carousel",
     "treeShaking": "Tree Shaking",
     "counter": "Counter",
-    "nuxt": "Nuxt"
+    "nuxt": "Nuxt",
+    "ssrGuide": "SSR"
   },
   "all": {
     "examples": "Examples",
@@ -3977,5 +3977,28 @@
       "nuxtConfig": "Then you need to update nuxt-config.ts file:",
       "moreAboutConfig": "More about configuration"
     }
+  },
+  "ssrGuide": {
+    "title": "SSR",
+    "description": "Vuestic is fully compatible with server-side rendering.",
+    "cssVariables": {
+      "title": "CSS variables",
+      "description": "Vuestic UI uses `CSS variables` in components. For SSR you need to define them in html head element. You can use following code to generate CSS Variables based on your [ColorConfig](/services/colors-config):"
+    },
+    "solutions": {
+      "title": "Examples",
+      "description": "Here are two examples how you can add CSS variables to html head",
+
+      "nuxt": "Look at Nuxt3 guide",
+
+      "viteSsrPlugin": { 
+        "title": "Vite SSR Plugin",
+        "description": "Learn more about [Vite SSR Plugin](https://vite-plugin-ssr.com/vue-tour)"
+      },
+      "vitesse": { 
+        "title": "Vitesse",
+        "description": "Learn more about [Vitesse](https://github.com/antfu/vitesse) and [useHead](https://github.com/vueuse/head#server-side-rendering)"
+      }
+    }
   }
-}
+}
diff --git a/packages/docs/src/locales/ru/ru.json b/packages/docs/src/locales/ru/ru.json
@@ -1277,7 +1277,8 @@
     "carousel": "Carousel",
     "treeShaking": "Tree Shaking",
     "counter": "Counter",
-    "nuxt": "Nuxt"
+    "nuxt": "Nuxt",
+    "ssrGuide": "Ssr Guide"
   },
   "all": {
     "examples": "Примеры",
@@ -3837,5 +3838,8 @@
       "nuxtConfig": "Затем обновите файл nuxt-config.ts:",
       "moreAboutConfig": "Подробнее про конфигурирование"
     }
+  },
+  "ssrGuide": {
+    "title": "-- Here is the title --"
   }
-}
+}
diff --git a/packages/docs/src/page-configs/getting-started/ssr-guide/code-examples/css-variables.ts b/packages/docs/src/page-configs/getting-started/ssr-guide/code-examples/css-variables.ts
@@ -0,0 +1,3 @@
+export default `
+app.config.globalProperties.$vaColorConfig.renderCSSVarialbes()
+`
diff --git a/packages/docs/src/page-configs/getting-started/ssr-guide/code-examples/index.ts b/packages/docs/src/page-configs/getting-started/ssr-guide/code-examples/index.ts
@@ -0,0 +1,3 @@
+export { default as cssVariables } from './css-variables'
+export { default as viteSsrPlugin } from './vite-ssr-plugin'
+export { default as vitesse } from './vitesse'
diff --git a/packages/docs/src/page-configs/getting-started/ssr-guide/code-examples/vite-ssr-plugin.ts b/packages/docs/src/page-configs/getting-started/ssr-guide/code-examples/vite-ssr-plugin.ts
@@ -0,0 +1,22 @@
+export default `// ...
+import { createVuestic } from 'vuestic-ui'
+import 'vuestic-ui/css'
+
+export async function render(pageContext) {
+  // ...
+  app.use(createVuestic())
+
+  const appHtml = await renderToString(app)
+  const cssVarialbes = app.config.globalProperties.$vaColorConfig.renderCSSVarialbes()
+
+  return escapeInject\`<!DOCTYPE html>
+    <html>
+      <head>
+        <title>Vuestic App</title>
+        <style>\${cssVarialbes}</style>
+      </head>
+      <body>
+        <div id="app">\${dangerouslySkipEscape(appHtml)}</div>
+      </body>
+    </html>\`
+}`
diff --git a/packages/docs/src/page-configs/getting-started/ssr-guide/code-examples/vitesse.ts b/packages/docs/src/page-configs/getting-started/ssr-guide/code-examples/vitesse.ts
@@ -0,0 +1,24 @@
+export default `// ...
+import { createVuestic } from 'vuestic-ui'
+import { ref } from 'vue'
+import 'vuestic-ui/css'
+
+const routes = setupLayouts(generatedRoutes)
+
+export const createApp = ViteSSG(
+  App,
+  { routes, base: import.meta.env.BASE_URL },
+  (ctx) => {
+    Object.values(import.meta.globEager('./modules/*.ts')).forEach(i => i.install?.(ctx))
+    ctx.app.use(createVuestic())
+
+    const head = app.config.globalProperties.$head
+    const colorConfig = app.config.globalProperties.$vaColorConfig
+    head.addHeadObjs(ref({
+      htmlAttrs: {
+        style: colorConfig.renderCSSVarialbes(),
+      },
+    }))
+  },
+)
+`
diff --git a/packages/docs/src/page-configs/getting-started/ssr-guide/page-config.ts b/packages/docs/src/page-configs/getting-started/ssr-guide/page-config.ts
@@ -0,0 +1,28 @@
+import { ApiDocsBlock } from '@/types/configTypes'
+import { PageGenerationHelper } from '@/helpers/DocsHelper'
+import * as code from './code-examples'
+
+const block = new PageGenerationHelper(__dirname)
+
+const config: ApiDocsBlock[] = [
+  block.title('ssrGuide.title'),
+  block.paragraph('ssrGuide.description'),
+
+  block.subtitle('ssrGuide.cssVariables.title'),
+  block.paragraph('ssrGuide.cssVariables.description'),
+  block.code(code.cssVariables),
+
+  block.subtitle('ssrGuide.solutions.title'),
+  block.paragraph('ssrGuide.solutions.description'),
+
+  block.link('ssrGuide.solutions.nuxt', '/en/getting-started/nuxt'),
+
+  block.headline('ssrGuide.solutions.viteSsrPlugin.title'),
+  block.paragraph('ssrGuide.solutions.viteSsrPlugin.description'),
+  block.code(code.viteSsrPlugin),
+  block.headline('ssrGuide.solutions.vitesse.title'),
+  block.paragraph('ssrGuide.solutions.vitesse.description'),
+  block.code(code.vitesse),
+]
+
+export default config
diff --git a/packages/docs/src/pages/getting-started/ssr-guide.vue b/packages/docs/src/pages/getting-started/ssr-guide.vue
@@ -0,0 +1,20 @@
+<template>
+  <docs-content :config="configComputed" />
+</template>
+
+<script lang="ts">
+import { Vue, Options } from 'vue-class-component'
+import DocsContent from '../../components/DocsContent.vue'
+import ssrGuideConfig from '../../page-configs/getting-started/ssr-guide/page-config'
+
+@Options({
+  components: {
+    DocsContent,
+  },
+})
+export default class SsrGuide extends Vue {
+  get configComputed () {
+    return ssrGuideConfig
+  }
+}
+</script>