Dashboard UI

Once you’ve set up your customer, you’ll want to add pages to the Dashboard menu. This is done with something called "routes."

Routing and Dashboard Menu

Look for a file called routes.ts in your customer’s Vue code. It comes with a sample page to get you started.

To add a new page (like a product list), just add a new entry to the routes list. Here’s how:

import Products from './components/Products.vue';
import { ArchiveBoxIcon } from '@heroicons/vue/24/outline';

const routes: SnappyRoute[] = [
    // ...existing routes...
    {
        title: 'Products',
        path: '/products',
        icon: ArchiveBoxIcon,
        component: Products,
    },
];

This will put a "Products" link in the menu. When you click it, your new page will open!

API Communication

To communicate with the API we have a dedicated interface to make it simple:

import { apiV3 } from "@snpy";

const callApi = async () => {
    const result = await apiV3("/test-endpoint");

    // result: { "hello": "world" }
}

Bob API

There is also a dedicated API for data management with Bobs.

import { bobApi } from "@snpy";

const addBobAndDeleteItAgain = async () => {
    const bob = bobApi.merge({
        "flavor": "my_bob",
        "funny": "haha",
    });

    // bob: { id: "238923uah", "flavor": "my_bob", "timestamp": ... }

    await bobApi.del(bob);

    // aaand it's gone
}