Vable - Vue

Install VableAI in less than 5 minutes.

For full documentation, visit docs.vable.ai/getting-started/vue.

Installation

Install the VableAI SDK by running the following command:

npm install @vableai/vue

Add Widget to your website

<template>
  <Vable
    public-key="<replace_with_public_key>"
    :routes="routes"
    :theme="{
      primaryBackground: '#161F2D',
      secondaryBackground: '#1E293B',
      buttonBackground: '#161F2D',
    }"
  >
    <!-- your child components -->
    <RouterView />
  </Vable>
</template>

<script setup>
import { Vable } from "@vableai/vue/init";
import { routes } from "./router";
</script>

Once added, you should be able to see the VableAI widget on your website.

Configuring routes

VableAI supports routing out of the box and can plug in with existing routes declared for Vue Router. For routing to work, VableNavigation must be used as the root/parent route component.

1. Pass your routes to the Vable component via the routes prop.
2. Set VableNavigation as the component of your root route layout.

import { VableNavigation } from "@vableai/vue";

const routes = [
  {
    path: "/",
    component: VableNavigation,
    children: [
      { path: "", component: () => import("./pages/Home.vue") },
      { path: "about", component: () => import("./pages/About.vue") },
    ],
  },
];

Then pass the routes to the Vable component:

<template>
  <Vable
    public-key="<replace_with_public_key>"
    :routes="routes"
  >
    <RouterView />
  </Vable>
</template>

<script setup>
import { Vable } from "@vableai/vue/init";
import { routes } from "./router";
</script>