If you would like to use CKBox in a Vue application, start by installing the ckbox package as described in this guide. Then, create a Vue component in which you attach a reference to a <div /> element and use it to instantiate CKBox in the onMounted lifecycle method.

Please refer to our repo with examples for full code sample.

Show below is the content of an example Vue component file:

    <div ref="ckbox" />

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as CKBox from "ckbox";
import "ckbox/dist/styles/ckbox.css";

const ckbox = ref();

onMounted(() => {
    CKBox.mount(ckbox.value, {
        tokenUrl: "https://your.token.url",

See the list of the supported configuration options that will help you configure the component.