92 lines
1.4 KiB
Markdown
92 lines
1.4 KiB
Markdown
# 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 |