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.