Nuxt 3 + PrimeVue 4 Starter

Build your VUE.js App with Nuxt3 (Nuxt 4 ready). First Class PrimeVUE support. Validation by Formkit. Module by FormKit-PrimeVue-Nuxt. Based on PrimeVue Styled Theme with Aura Preset.

THX to antfu / Vitesse Nuxt3 for starter code

Features

• Nuxt 3 - SSR, ESR, File-based routing, components auto importing, modules, etc.
• PrimeVue 4.2.x with Aura Theme
• Formkit-PrimeVue PrimeVue Formkit Integration
• Vite - Instant HMR
• UnoCSS - The instant on-demand atomic CSS engine.
• Use icons from any icon sets in Pure CSS, powered by UnoCSS
• State Management via Pinia
• TipTap - Headless Editor
• Vitest - Blazing Fast Unit Test Framework (Getting started)

Nuxt Modules (included in formkit-prinevue-nuxt)

• FormKit-PrimeVue-Nuxt - FormKit PrimeVue Nuxt Module
• PrimeVue-Nuxt PrimeVue UI Framework
• FormKit-Nuxt - Form Handling
• I18n-Nuxt - Integration with Vue I18n

Nuxt Modules (additional)

• Pinia - intuitive, type safe, light and flexible Store for Vue.
• VueUse - collection of useful composition APIs.
• UnoCSS - the instant on-demand atomic CSS engine.
• Content - parses .md, .yml, .csv and .json files
• Images - Optimised images for Nuxt
• Fonts - Plug-and-play custom web font optimization and configuration for Nuxt apps
• nuxt-test-utils - Support for e2e and unit testing (Getting started)

Module Configurations

FormKit PrimeVue Nuxt

Module options for FormKit PrimeVue Nuxt. Below are the default values, if they fit your needs, you don't need to add them to your nuxt.config.ts.

  formkitPrimevue: {
  includePrimeIcons: true,
    includeStyles: true,
    installFormKit: true,
    installI18N: true,
},

Nuxt PrimeVue configuration

  primevue: {
    autoImport: true,
  },
  options: {
    theme: {
      preset: Aura,
        options: {
        darkModeSelector: '.dark',
      },
    },
    ripple: true,
  },
},

PrimeVue 3

Nuxt PrimeVue 3 under the prime3 branch of this project

Starter App on Netlify

Project setup and usage

Install node:

Latest node LTS version required (20) Use node manager like nvm to install.

Install pnpm: https://pnpm.io/installation

Install dependencies:

pnpm install

Run development server:

pnpm dev

Vitest test runner:

pnpm test:unit

Build:

pnpm build

Start Production build:

pnpm start

Tools

I use IntelliJ with VUE.js plugin.

Supporters

JetBrains is supporting this open source project with: