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 ​

# 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

Theme: docs ​

# 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

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'          : {}, 
    },
  },
})