Official Partner of
Nuxt
๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ Hire us

SSR
#

Vuestic is fully compatible with server-side rendering.

CSS variables
#

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:

app.config.globalProperties.$vaColorConfig.renderCSSVariables();

Examples
#

Here are two examples how you can add CSS variables to html head

Look at Nuxt3 guide

Vite SSR Plugin
#

Learn more about Vite SSR Plugin

import { createVuestic } from "vuestic-ui";
import "vuestic-ui/css";

export async function render(pageContext) {
  // ...
  app.use(createVuestic());

  const appHtml = await renderToString(app);
  const cssVariables =
    app.config.globalProperties.$vaColorConfig.renderCSSVariables();

  return escapeInject`<!DOCTYPE html>
    <html>
      <head>
        <title>Vuestic App</title>
        <style>${cssVariables}</style>
      </head>
      <body>
        <div id="app">${dangerouslySkipEscape(appHtml)}</div>
      </body>
    </html>`;
}

Vitesse
#

Learn more about Vitesse and useHead

import { ViteSSG } from 'vite-ssg'
import { setupLayouts } from 'virtual:generated-layouts'
import App from './App.vue'
import type { UserModule } from './types'
import generatedRoutes from '~pages'

import { createVuestic } from 'vuestic-ui'
import { ref } from 'vue'
import 'vuestic-ui/css'

const routes = setupLayouts(generatedRoutes)

export const createApp = ViteSSG(
  App,
  { routes, base: "/" },
  (ctx) => {
    Object.values(globalThis._importMeta_.glob<{ install: UserModule }>('./modules/*.ts', { eager: true }))
    .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.renderCSSVariables(),
      },
    }))
  },
)