# FDS Vue Core - Usage Guide

## Installation

### From npm

Install the package from npm:

```bash
pnpm add fds-vue-core
```

### Local Development with pnpm link

For local development, you can link the package to your project:

1. In the `fds-vue-core` directory, create a global link:

```bash
pnpm link --global
```

1. In your consuming project, link to the local package:

```bash
pnpm link --global fds-vue-core
```

1. To unlink when you're done:

```bash
# In your consuming project
pnpm unlink fds-vue-core

# In the fds-vue-core directory
pnpm unlink --global
```

**Note:** After making changes to `fds-vue-core`, you may need to rebuild the package for changes to take effect:

```bash
pnpm build
```

## Basic Usage

### Global Registration

Import and register all components globally in your Vue app:

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import FDS from 'fds-vue-core'

const app = createApp(App)
app.use(FDS)
app.mount('#app')
```

### Individual Component Import

Import specific components as needed:

```javascript
import { FdsButton, FdsInput, FdsModal } from 'fds-vue-core'
```

Register them locally:

```javascript
export default {
  components: {
    FdsButton,
    FdsInput,
    FdsModal,
  },
}
```

## Tailwind CSS Configuration

All components use Tailwind CSS classes. Make sure your Tailwind configuration includes the necessary utilities.

### tailwind.config.js

```javascript
import preset from 'fds-vue-core/tailwind.preset.cjs'

export default {
  presets: [preset],
  // Your other Tailwind configuration
}
```

### style.css

```css
@import 'fds-vue-core/tokens.css';
@import 'tailwindcss';
@source '../node_modules/fds-vue-core';
@import 'fds-vue-core/slot-styles.css';
@import 'fds-vue-core/apply.css';
@import 'fds-vue-core/fonts.css';
```

## TypeScript Support

All components are fully typed. Type definitions are included in the package.

## Further Documentation

For detailed component API documentation and examples, see Storybook:

```bash
pnpm storybook
```