# Canva Connector Component

A Vue 3 component that connects to the Canva API, allowing users to create, manage, and organize their Canva designs from within your application.

## Features

- Connect to Canva using OAuth authentication
- View and manage all your Canva designs
- Create new designs directly from the component
- Duplicate and organize existing designs
- Responsive UI built with Tailwind CSS

## Installation

```bash
npm install @canva-connector/frontend
# or
yarn add @canva-connector/frontend
# or
pnpm add @canva-connector/frontend
```

## Usage

### As a Plugin (Recommended)

```javascript
import { createApp } from 'vue'
import { CanvaConnectorPlugin } from '@canva-connector/frontend'

const app = createApp(App)

// Install the plugin
app.use(CanvaConnectorPlugin)

app.mount('#app')
```

Then use the component in your templates:

```vue
<template>
  <CanvaConnector />
</template>
```

### As a Component

```javascript
import { CanvaConnector } from '@canva-connector/frontend'

export default {
  components: {
    CanvaConnector
  }
}
```

```vue
<template>
  <div id="app">
    <CanvaConnector />
  </div>
</template>
```

## Development

To run the development server:

```bash
cd frontend
pnpm dev
```

To build the library:

```bash
cd frontend
pnpm build-lib
```

To build the standalone application:

```bash
cd frontend
pnpm build
```

## License

MIT