# Vue

If you would like to use CKBox in a Vue application, start by installing the `ckbox` package as described in [this guide](../../installation.md#npm). 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.

> **Note**
>
> Please refer to our repo with examples for full [code sample](https://github.com/ckbox-io/ckbox-examples/tree/main/vue).

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

```html
<template>
	<div ref="ckbox" />
</template>

<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",
	});
});
</script>
```

> **Note**
>
> See the list of the supported [configuration options](../../configuration/configuration-options.md) that will help you configure the component.

> **Note**
>
> Need more functionality? [Take a survey](https://surveys.hotjar.com/1d72aefc-0073-416d-9e70-b773458881b4) and help us develop CKBox to suit your needs better!

---

Full index of the CKBox documentation: [llms.txt](../../../../llms.txt)