Adding Pages

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { engineFetch, isGlobalDemoMode, safeJson } from '../lib/pasturesApi';

const loading = ref(true);
const data = ref<any>(null);

const DEMO_DATA = {
  items: [
    { id: '1', name: 'Example item', status: 'healthy' },
  ],
};

onMounted(async () => {
  if (isGlobalDemoMode()) {
    await new Promise((r) => setTimeout(r, 400));
    data.value = DEMO_DATA;
    loading.value = false;
    return;
  }

  const res = await engineFetch('/api/my-feature');
  data.value = safeJson(await res.json());
  loading.value = false;
});
</script>

<template>
  <div class="pastures-page">
    <h1>My Feature</h1>
    <div v-if="loading" class="loading-indicator">Loading…</div>
    <div v-else>
      <!-- render data -->
    </div>
  </div>
</template>

import MyFeaturePage from './pages/MyFeaturePage.vue';

plugin.addRoute({
  name:      'pastures-my-feature',
  path:      '/pastures/my-feature',
  component: MyFeaturePage,
  meta:      { product: 'pastures' },
});

virtualType({
  label:      'My Feature',
  name:       'pastures-my-feature',
  route:      { name: 'pastures-my-feature' },
  namespaced: false,
});

basicType([
  // ... existing entries
  'pastures-my-feature',
]);

weightType('pastures-my-feature', 50);

case '/api/my-feature':
  return {
    items: [
      { id: '1', name: 'Example item', status: 'healthy' },
    ],
  };

<script setup lang="ts">
defineProps<{
  embedded?: boolean;
}>();
</script>

<template>
  <div class="pastures-page">
    <h1 v-if="!embedded">My Tab Feature</h1>
    <!-- page content -->
  </div>
</template>

import MyTabFeature from './MyTabFeaturePage.vue';

const tabs = [
  // ... existing tabs
  { label: 'My Tab', component: MyTabFeature },
];