Skip to content
Orbix Vue · Tailwind CSS v1.0.3

Starter kit

orbix-vue-starterkit/ is the same Vue application without the demo pages: start a new project from it and copy pages or components from the full template when you need them.

What it includes

  • The application shell: sidebar, topbar, footer, page header, theme customizer, command palette, notifications and language menus.
  • The app, auth and blank layouts and the router.
  • The nine basic authentication pages (sign in, sign up, forgot and reset password, lock screen, two-step verification, email verification, signed out, success).
  • One empty start page at /; unknown URLs return to it.
  • The Tailwind CSS CSS engine, the five languages with RTL, the theme runtime, the composables, the foundry-ui Vue components and the test suite.

What it leaves out: the demo pages, the components and page scripts only they use, the demo data and the chart library. Menu links to removed pages point to # until you add your own.

Starter kit

Install

Exactly as the full template (see Installation):

cd orbix-vue-starterkit
npm install
npm run dev

Bring a page from the full template

  1. Copy the page component from orbix-vue/src/pages/... to the same folder of the starter kit.
  2. Copy the components it imports (@/components/apps/ProductCard.vue → src/components/apps/ProductCard.vue).
  3. Add its line to src/app/pages.ts and its menu entry to src/app/menu.ts.
  4. Every translation file of the full template is already in the starter kit (src/locales/).
  5. If it calls usePageScript(init), copy the script from src/scripts/ (and src/data/ for demo data). For charts, also copy src/core/charts.ts and src/composables/useChart.ts and run npm install echarts.
  6. Run npm run build and npm test.

Connect authentication

The auth pages are screens only, so you can plug in the authentication you prefer (your API, Auth0, Firebase, Supabase, Clerk...). The sign-in form validates its fields in src/scripts/auth.ts and then navigates to data-auth-next (the dashboard). To call your API instead, handle the submit in the form component:

<!-- src/components/auth/AuthSignIn.vue -->
<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter();

async function onSubmit(event: SubmitEvent) {
  const data = new FormData(event.currentTarget as HTMLFormElement);
  const response = await fetch('/api/login', { method: 'POST', body: data, credentials: 'include' });
  if (response.ok) await router.push('/');
}
</script>

<template>
  <form class="fd-form" novalidate @submit.prevent="onSubmit">
    <!-- the fields of the sign-in form -->
  </form>
</template>

Remove data-auth-form from that form so the demo validation does not run, keep the input name attributes your API expects (email, password, remember), and protect your pages with a navigation guard in src/app/router.ts that checks the session:

router.beforeEach((to) => {
  if (to.meta.layout === 'app' && !session.isSignedIn()) return '/auth/basic/sign-in';
});