Skip to main content

Getting started

Installation​

npm i -S @connect2ic/core @connect2ic/vue

Wrap your app with the Provider​

Optionally pass in canister definitions as well (as generated by dfx)

<script setup>
  import { createClient } from "@connect2ic/core"
  import { defaultProviders } from "@connect2ic/core/providers"
  import { Connect2ICProvider } from "@connect2ic/vue"
  import "@connect2ic/core/style.css"
  import * as counter from "canisters/counter"

  const client = createClient({
    canisters: {
      counter,
    },
    providers: defaultProviders,
  })
</script>

<template>
  <Connect2ICProvider :client="client">
    <App />
  </Connect2ICProvider>
</template>

Place the components inside your app​

<script setup>
  import { ConnectButton, ConnectDialog, useConnect } from "@connect2ic/vue"

  const { isConnected, principal, activeProvider } = useConnect({
    onConnect: () => {
      // Signed in
    },
    onDisconnect: () => {
      // Signed out
    }
  })
</script>

<template>
  <div class="my-app">
    <ConnectButton />
    <ConnectDialog />
  </div>
</template>

Done​

Explore the remaining sections for further customization & features.