Getting Started

Installation Guide

Quick Start

The fastest way to use Persona is using starter template, There various themes to suit your project:

Theme: dashboard

👉 Suit for building dashboard, powered with Nuxt 3.

Installation

# Install current folder
npx degit privy-open-source/persona-starter#dashboard

# Install in new folder
npx degit privy-open-source/persona-starter#dashboard my_dashboard

Try Online

Theme: docs

👉 Suit for building technical documentation and static web, powered with VitePress.

Installation

# Install current folder
npx degit privy-open-source/persona-starter#docs

# Install in new folder
npx degit privy-open-source/persona-starter#docs my_docs

Try Online

Manual Installation

Nuxt 3

👉 If you want add Persona to existing Nuxt 3 Project, you can follow the steps below

1. Install Persona

Install persona and all dependencies.

yarn add --dev @privyid/persona @privyid/browserslist-config @privyid/tailwind-preset tailwindcss autoprefixer postcss  postcss-hexrgba postcss-lighten-darken

2. Configure Tailwind

Add this your tailwind.config.js, Create one if not exist, using npx tailwindcss init.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './components/**/*.{js,vue,ts}',  
    './layouts/**/*.vue',             
    './pages/**/*.vue',               
    './plugins/**/*.{js,ts}',         
    './nuxt.config.{js,ts}',          
    './app.vue',                      
  ],
  presets: [require('@privyid/tailwind-preset')], 
}

3. Add Tailwind base CSS

Create ./assets/css/tailwind.css.

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

4. Configure Nuxt

Add this in your nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@privyid/persona'
  ],
  css    : ['~/assets/css/tailwind.css'], 
  postcss: {
    plugins: {
      'postcss-hexrgba'       : {}, 
      'tailwindcss/nesting'   : {}, 
      'tailwindcss'           : {}, 
      'postcss-lighten-darken': {}, 
      'autoprefixer'          : {}, 
    },
  },
})