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
npm install @canva-connector/frontend
# or
yarn add @canva-connector/frontend
# or
pnpm add @canva-connector/frontend
Usage
As a Plugin (Recommended)
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:
<template>
<CanvaConnector />
</template>
As a Component
import { CanvaConnector } from '@canva-connector/frontend'
export default {
components: {
CanvaConnector
}
}
<template>
<div id="app">
<CanvaConnector />
</div>
</template>
Development
To run the development server:
cd frontend
pnpm dev
To build the library:
cd frontend
pnpm build-lib
To build the standalone application:
cd frontend
pnpm build
License
MIT