Setting up HighRise in a Nuxt SSR app

Note

For optimal development experience, we recommend starting with the ghl-ssr-boilerplate template, which provides a pre-configured Nuxt foundation. The release versions correspond to the latest version of Nuxt at the time of release. For custom implementations, please refer to the comprehensive setup guide below.

This guide will help you create and setup your Nuxt.js application with HighRise, featuring configuration optimized for Server-Side Rendering (SSR) performance.

Prerequisites

Package Manager

• node.js >= 20 ( 22.10.0 recommended)
• yarn >= 4 ( 4.9.4 recommended) OR
• pnpm >= 9 ( 9.12.1 recommended) OR
• npm >= 10

TailwindCSS

• autoprefixer >= 10 (10.4.20 recommended)
• postcss >= 8 (8.4.47 recommended)
• tailwindcss >= 3 (3.4.14 recommended)

Nuxt

• nuxt >= 3.11.2

Configure package.json

Add the following resolutions configuration to your package.json to ensure css-render dependencies use the correct versions:

yarn

"resolutions": {
  "@css-render/*": "^0.15.14",
  "css-render": "^0.15.14",
  "vue": "^3.5.20"
}

npm

"overrides": {
  "@css-render/*": "^0.15.14",
  "css-render": "^0.15.14",
  "vue": "^3.5.20"
}

pnpm

"pnpm": {
  "resolutions": {
    "@css-render/*": "^0.15.14",
    "css-render": "^0.15.14",
    "vue": "^3.5.20"
  }
}

Authentication

Refer here.

Install Required Packages

Install HighRise and ghl-icons. Detailed Installation Guide here.

yarn

yarn add @platform-ui/highrise @platform-ui/nuxt @gohighlevel/ghl-icons

npm

npm i @platform-ui/highrise @platform-ui/nuxt @gohighlevel/ghl-icons

pnpm

pnpm i @platform-ui/highrise @platform-ui/nuxt @gohighlevel/ghl-icons

Install Dev Dependencies

yarn

yarn add -D [email protected] [email protected] [email protected] @ghl-plugins/tailwind-prefix-wrapper @nuxtjs/tailwindcss

npm

pnpm i -D [email protected] [email protected] [email protected] @ghl-plugins/tailwind-prefix-wrapper @nuxtjs/tailwindcss

pnpm

pnpm i -D [email protected] [email protected] [email protected] @ghl-plugins/tailwind-prefix-wrapper @nuxtjs/tailwindcss

Configure TailwindCSS

Create a tailwind.config.ts file in your project root and add the TailwindCSS config to it.

tailwind.config.js

const { HLTailwindConfig } = require('@platform-ui/highrise')
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  ...HLTailwindConfig,
  theme: {
    extend: {
      ...HLTailwindConfig.theme.extend,
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
}

tailwind.config.ts

import { HLTailwindConfig } from '@platform-ui/highrise'
import defaultTheme from 'tailwindcss/defaultTheme'

export default {
  ...HLTailwindConfig,
  theme: {
    extend: {
      ...HLTailwindConfig.theme.extend,
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
}

Create tailwind.css

Create a CSS file named tailwind.css in your project root and add the TailwindCSS directives to it.

tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Your custom styles below */

Update nuxt.config.ts

• Add the CSS files in nuxt.config.ts to include the tailwind styles.
• Update the modules array to include @nuxt/fonts, @nuxtjs/tailwindcss, and @platform-ui/nuxt.

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  nitro: {
    compatibilityDate: '2025-08-29',
    preset: 'node-server',
  },
  devtools: { enabled: true },
  modules: ['@nuxt/fonts', '@nuxtjs/tailwindcss', '@platform-ui/nuxt'],
  css: ['@/tailwind.css'],
  vite: {
    ssr: {
      noExternal: ['@platform-ui/highrise', '@gohighlevel/ghl-icons'],
    },
  },
})

Setting up PostCSS config

Create a file named postcss.config.ts in the root of your app and add the below content. Replace <appNamePlaceholder> with the name of your app. The same name has to be included in the namespace prop in the next step.

postcss.config.ts

import autoprefixer from 'autoprefixer'
import ghlTailwindPrefixWrapper from '@ghl-plugins/tailwind-prefix-wrapper'
import tailwindcss from 'tailwindcss'

export default {
  plugins: [tailwindcss(), autoprefixer(), ghlTailwindPrefixWrapper({ prefix: '.<appNamePlaceholder> ' })],
}

Test your setup by adding HighRise components to your app

project-root/pages/MyNewPage.vue

<script lang="ts" setup>
  import { HLContentWrap, HLButton } from '@platform-ui/highrise'
</script>

<template>
  <HLContentWrap namespace="<appNamePlaceholder>">
    <HLButton id="sample-button">hello world!</HLButton>
    <!-- other SFCs -->
  </HLContentWrap>
</template>