Frontfriend v3 Integration Guide for Vue 3 + Vite

This legacy guide walks you through integrating Frontfriend v3 with a Vue 3 + Vite project that uses Tailwind CSS v3. To migrate, contact the Frontfriend team.

Prerequisites

• Vue 3 + Vite project already created
• Node.js >= 16
• Tailwind CSS v3 installed (or will be installed)

Installation

Step 1: Install Dependencies

# Install Frontfriend Tailwind plugin
npm install @frontfriend/tailwind@3

# Install Tailwind CSS v3 if not already installed
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p

Step 2: Create Configuration

Create frontfriend.config.js in your project root:

export default {
  'ff-id': 'your-frontfriend-id-here', // Replace with your actual FF ID
  aliases: {
    ui: '@/components/ui', // Where components will be downloaded
  },
};

Step 3: Configure Tailwind

Update tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  plugins: [require('@frontfriend/tailwind')()],
};

Step 4: Setup CSS

Create or update src/style.css:

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

Import in src/main.js:

import { createApp } from 'vue';
import './style.css';
import App from './App.vue';

createApp(App).mount('#app');

Step 5: Configure Vite Plugin

Update vite.config.js:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import frontfriend from '@frontfriend/tailwind/vite';

export default defineConfig({
  plugins: [vue(), frontfriend()],
  resolve: {
    alias: {
      '@': '/src',
    },
  },
});

Step 6: Initialize Design Tokens

# Fetch your design tokens from Frontfriend
npx frontfriend init

This creates a local cache of your design system tokens.

Step 7: Download Vue Components

# Download all available Vue components
npx frontfriend download all -f vue

# Or download specific components
npx frontfriend download button card accordion -f vue

Components will be downloaded to src/components/ui/ (as configured in your aliases).

Using Design Tokens

After initialization, use your design tokens as Tailwind utilities:

<template>
  <div class="bg-brand-low text-brand-strong p-4">
    <h1 class="text-2xl font-bold mb-4">Design System Connected</h1>
    <p class="text-neutral-mid">
      Your Frontfriend tokens are now available as Tailwind utilities.
    </p>
  </div>
</template>

CLI Commands

• npx frontfriend init - Initialize/update design tokens
• npx frontfriend init --force - Force refresh tokens
• npx frontfriend status - Check configuration status
• npx frontfriend download <components> -f vue - Download components
• npx frontfriend clean - Clear token cache

Troubleshooting

Styles not applying

1. Check that npx frontfriend init completed successfully
2. Verify cache exists: npx frontfriend status
3. Force refresh: npx frontfriend init --force

Components in wrong location

1. Check your frontfriend.config.js has correct ui alias
2. Use -o flag to override: npx frontfriend download button -f vue -o ./src/components

ff-id not found

1. Ensure frontfriend.config.js exists in project root
2. Verify the ff-id field is present and correct