HighRise

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:

json
"resolutions": {
  "@css-render/*": "^0.15.14",
  "css-render": "^0.15.14",
  "vue": "^3.5.20"
}
json
"overrides": {
  "@css-render/*": "^0.15.14",
  "css-render": "^0.15.14",
  "vue": "^3.5.20"
}
json
"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.

sh
yarn add @platform-ui/highrise @platform-ui/nuxt @gohighlevel/ghl-icons
sh
npm i @platform-ui/highrise @platform-ui/nuxt @gohighlevel/ghl-icons
sh
pnpm i @platform-ui/highrise @platform-ui/nuxt @gohighlevel/ghl-icons

Install Dev Dependencies ​

sh
yarn add -D [email protected] [email protected] [email protected] @ghl-plugins/tailwind-prefix-wrapper @nuxtjs/tailwindcss
sh
pnpm i -D [email protected] [email protected] [email protected] @ghl-plugins/tailwind-prefix-wrapper @nuxtjs/tailwindcss
sh
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.ts
ts
import { HLTailwindConfig } from '@platform-ui/highrise'
import defaultTheme from 'tailwindcss/defaultTheme'

export default {
  ...HLTailwindConfig,
  content: [...HLTailwindConfig.content, './pages/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', ...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
css
@tailwind base;
@tailwind components;
@tailwind utilities;

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
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
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
html
<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>