Nectar

Appearance

Getting Started ​

Welcome! This guide will walk you through setting up your Nuxt 3 project using Tailwind, PrimeVue in unstyled mode, and the custom nectar theme.

1. Copy the Theme Presets ​

Download or clone this repository, then copy the entire /presets/nectar/ folder into the root of your Nuxt project:

/your-project-root/
├── presets/
│   └── nectar/

2. Configure PrimeVue in nuxt.config.ts ​

Enable PrimeVue’s unstyled mode and point to the nectar theme presets:

ts
import { defineNuxtConfig } from 'nuxt'
import path from 'path'

export default defineNuxtConfig({
  primevue: {
    usePrimeVue: true,

    components: {
      prefix: 'Prime',
      exclude: ['Form', 'FormField'],
    },

    options: {
      unstyled: true,
    },

    importPT: {
      from: path.resolve(__dirname, './presets/nectar/'),
    },
  },
})

Notes ​

  • All PrimeVue components will use the custom styles defined in your nectar preset.