Create a dashboard page

1. Create a new page

For this example we are going to create the AI Demo page in the dashboard. We start by creating the new page in the SaaS app inside /apps/saas/pages/(authenticated). To do so, we need to create a new .vue file with the name of the page (in this case ai-demo.vue).

<script setup lang="ts">
definePageMeta({
  layout: "app",
});
</script>

<template>
  <div>
    <h1>AI Demo</h1>
  </div>
</template>

2. Add menu item for the new page

In the NavBar component we need to add a new menu item for the new page:

const menuItems = [
  // ...
  {
    title: "AI Demo",
    href: "/app/ai-demo",
    icon: WandIcon,
  },
];

Now we can navigate to the new page by clicking on the menu item.