# Vue 3 + Vite Setup (v3)

Legacy Tailwind CSS v3 guide for Vue 3 and Vite

# 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. For new Tailwind CSS v4 projects, use the [Frontfriend v4 Getting Started guide](/docs/legacy/index/).

## Prerequisites

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

## Installation

### Step 1: Install Dependencies

```bash
# 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:

```js
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`:

```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`:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Import in `src/main.js`:

```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`:

```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

```bash
# Fetch your design tokens from Frontfriend
npx frontfriend init
```

This creates a local cache of your design system tokens.

### Step 7: Download Vue Components

```bash
# 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:

```vue
<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