Vue
This guide shows you how to use Vizzly with Vue. The first part also includes setting up a fresh vue project. If you already have a Vue project, you can skip to the second part.
0. Setting up a new Vue project
Vue offers a small CLI tool which allows you to easily bootstrap a new Vue project. To install it, run the following command:
npm create vue@latest
After you've selected your preferred options and the project has been created, you should go to the directory and install the necessary dependencies:
cd <project-name>
npm install # or yarn install or pnpm install
1. Installing the Vizzly Dashboard Component
To install the Vizzly Dashboard Component, run the following command:
npm install @vizzly/dashboard-webcomponent --legacy-peer-deps
2. Importing the Vizzly Dashboard Component
Update your App.vue file to import the Vizzly Dashboard Component:
<script setup>
import { onMounted, ref } from "vue";
import "@vizzly/dashboard-webcomponent";
const dashboardRef = ref(null);
onMounted(() => {
dashboardRef.value.render({
queryEngineEndpoint: "<< Your query engine endpoint >>",
identity: async () => {
return null;
}
});
});
</script>
<template>
<vizzly-dashboard ref="dashboardRef" />
</template>
3. Run it
To run the project, execute the following CLI command in your shell
npm run dev
Once done, open your browser and visit http://localhost:5173 (opens in a new tab). You will see a welcome message from us, and details on the next steps.