Adding Vue.js to Jekyll opens up interactive possibilities, but what if you want more than basic components? PrimeVue is a comprehensive UI component library that brings professional, pre-built components to your Vue applications. Think datepickers, galleries, data tables, and complex forms—all ready to use.

In this guide, we’ll integrate PrimeVue with Jekyll to demonstrate how you can build rich user interfaces directly in your blog posts without complex build tooling. If you’re looking to add professional UI components to your Jekyll site, this is how you do it.

Back to the HACKS!

ℹ
Prerequisites: Familiar with adding Vue.js to Jekyll? This post builds on that foundation by introducing PrimeVue's component library.

What is PrimeVue?

PrimeVue is an open-source UI component library for Vue 3 that provides:

  • 80+ Ready-to-Use Components - Everything from simple buttons to complex data tables
  • Professional Theming - Pre-built themes including Aura, Material, Bootstrap, and more
  • Accessibility - WCAG compliant components with proper ARIA support
  • Responsive Design - Components that work seamlessly across devices
  • No Build Step Required - Can be loaded via CDN for simple integrations

Unlike building custom Vue components from scratch, PrimeVue gives you production-ready UI elements that look professional out of the box.

Setting Up PrimeVue in Jekyll

Just like with vanilla Vue.js, we can load PrimeVue via CDN without any build tools. Here’s what we need:

Required Dependencies

Add these to the top of your Jekyll post (inside the Markdown file). Here’s what each does:

  1. PrimeIcons CSS - Icon library used by PrimeVue components
  2. PrimeFlex CSS - Optional utility CSS framework for layouts (similar to Tailwind)
  3. Vue 3 - The core Vue.js framework
  4. PrimeVue UMD - The PrimeVue component library
  5. Aura Theme - PrimeVue’s modern, clean theme

The Integration Pattern

The key to using PrimeVue in Jekyll is understanding the three-step process:

  1. Create the Vue app - Initialize Vue with createApp()
  2. Configure PrimeVue - Register PrimeVue with theme settings using app.use()
  3. Register components - Import only the components you need with app.component()

This selective component registration keeps your page lean—you’re not loading the entire library, just what you use.

Example 1: DatePicker Component

Let’s start with a simple interactive datepicker:

Select a Date:


Selected Date: {{ date }}