Vue Cookbook

Practical patterns for building screens with gnexus-ui-kit/vue.

CRUD Page

<script setup>
import { ref } from "vue";
import { GnButton, GnPageHeader, GnSearchField, GnTable, GnToolbar } from "gnexus-ui-kit/vue";

const query = ref("");
const rows = ref([]);
const columns = [
  { key: "name", label: "Name" },
  { key: "status", label: "Status" }
];
</script>

<template>
  <GnPageHeader title="Projects" subtitle="Workspace records">
    <template #actions>
      <GnButton variant="accent" icon="ph-plus">Create</GnButton>
    </template>
  </GnPageHeader>

  <GnToolbar title="Records" :meta="`${rows.length} items`">
    <template #actions>
      <GnSearchField v-model="query" />
    </template>
  </GnToolbar>

  <GnTable :columns="columns" :rows="rows" empty-text="No projects" />
</template>

Modal Form

<script setup>
import { ref } from "vue";
import { GnButton, GnInput, GnModal, useToast } from "gnexus-ui-kit/vue";

const open = ref(false);
const name = ref("");
const toast = useToast();

function save() {
  toast.success({ title: "Saved", text: name.value });
  open.value = false;
}
</script>

<template>
  <GnButton @click="open = true">Edit</GnButton>
  <GnModal v-model:open="open" title="Edit project">
    <GnInput v-model="name" label="Name" />
    <template #actions>
      <GnButton variant="primary" @click="open = false">Cancel</GnButton>
      <GnButton variant="success" @click="save">Save</GnButton>
    </template>
  </GnModal>
</template>

Details With Tabs

<script setup>
import { ref } from "vue";
import { GnDescriptionList, GnTabs, GnTimeline } from "gnexus-ui-kit/vue";

const tab = ref("details");
const tabs = [
  { id: "details", label: "Details" },
  { id: "activity", label: "Activity" }
];
const details = [
  { label: "Owner", value: "Core Team" },
  { label: "Status", value: "Active" }
];
const events = [
  { title: "Created", text: "Project record was created", meta: "Today" }
];
</script>

<template>
  <GnTabs v-model="tab" :items="tabs">
    <template #details>
      <GnDescriptionList :items="details" />
    </template>
    <template #activity>
      <GnTimeline :items="events" />
    </template>
  </GnTabs>
</template>

File Upload

<script setup>
import { ref } from "vue";
import { GnFileUpload } from "gnexus-ui-kit/vue";

const files = ref([]);
</script>

<template>
  <GnFileUpload v-model="files" badge="Max 12 MB" />
</template>

Navigation Shell

<script setup>
import { GnNavigationShell } from "gnexus-ui-kit/vue";

const items = [
  { label: "Overview", href: "#overview", icon: "ph-house", active: true },
  { label: "Projects", href: "#projects", icon: "ph-stack", meta: "12" }
];
</script>

<template>
  <GnNavigationShell
    brand="Product Console"
    current="Overview"
    title="Sections"
    subtitle="Workspace"
    footer-left="GNexus"
    footer-right="v0.2"
    :items="items"
  >
    <template #content>
      <main class="container">...</main>
    </template>
  </GnNavigationShell>
</template>

Toast After Save

<script setup>
import { useToast } from "gnexus-ui-kit/vue";

const toast = useToast();

function save() {
  toast.success({ title: "Saved", text: "Changes applied" });
}
</script>

Remember to wrap the app with GnToastProvider.