Epicmax - We are the core team behind Vuestic UI and Vuestic Admin and frontend development company specializing in Vue.js since our founding in 2017.
🔥🔥🔥 Hire us

SSR
#

Vuestic is fully compatible with server-side rendering.

CSS variables
#

Vuestic is fully compatible with server-side rendering.

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: globalThis._importMeta_.env.BASE_URL },
  (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(),
      },
    }))
  },
)