@cubis/foundry 0.3.83 → 0.3.84

package/workflows/workflows/agent-environment-setup/platforms/copilot/skills/vuejs/references/reactivity.md

@@ -1,284 +0,0 @@
-# Vue 3.5 Reactivity Reference
-
-## Overview
-
-Vue 3.5's reactivity system is built on `ref()`, `reactive()`, `computed()`, `watch()`, and `watchEffect()`. Vue 3.5 introduces `defineModel()` for two-way binding and `useTemplateRef()` for explicit template refs.
-
-## ref()
-
-Creates a reactive wrapper around a value. Access the value via `.value` in JavaScript; in templates, Vue unwraps it automatically.
-
-```vue
-<script setup lang="ts">
-import { ref } from 'vue';
-
-const count = ref(0);
-const name = ref('');
-
-function increment() {
-  count.value++;
-}
-</script>
-
-<template>
-  <p>{{ count }}</p> <!-- No .value in template -->
-  <button @click="increment">+1</button>
-</template>
-```
-
-### Typing Refs
-
-```typescript
-import { ref, type Ref } from 'vue';
-
-// Inferred as Ref<number>
-const count = ref(0);
-
-// Explicit generic
-const user = ref<User | null>(null);
-
-// Complex types
-const items = ref<Map<string, Item>>(new Map());
-```
-
-## reactive()
-
-Creates a deeply reactive object. Unlike `ref()`, no `.value` wrapper -- access properties directly.
-
-```vue
-<script setup lang="ts">
-import { reactive } from 'vue';
-
-interface FormState {
-  name: string;
-  email: string;
-  errors: Record<string, string>;
-}
-
-const form = reactive<FormState>({
-  name: '',
-  email: '',
-  errors: {},
-});
-
-function validate() {
-  form.errors = {};
-  if (!form.name) form.errors.name = 'Name is required';
-  if (!form.email) form.errors.email = 'Email is required';
-}
-</script>
-```
-
-### ref vs. reactive
-
-| `ref()` | `reactive()` |
-|---------|-------------|
-| Works with any value type | Only works with objects (not primitives) |
-| Access via `.value` in JS | Direct property access |
-| Can be reassigned (`count.value = 5`) | Cannot be reassigned (`form = newObj` breaks reactivity) |
-| Unwrapped in templates | No unwrapping needed |
-| Can be passed to functions without losing reactivity | Loses reactivity if destructured |
-
-**General rule**: Use `ref()` for primitives and simple values. Use `reactive()` for complex form state or objects you never reassign.
-
-## computed()
-
-Creates a cached, read-only derived value that recomputes only when dependencies change.
-
-```vue
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-
-const items = ref([1, 2, 3, 4, 5]);
-const filter = ref<'all' | 'even' | 'odd'>('all');
-
-const filteredItems = computed(() => {
-  switch (filter.value) {
-    case 'even': return items.value.filter(n => n % 2 === 0);
-    case 'odd': return items.value.filter(n => n % 2 !== 0);
-    default: return items.value;
-  }
-});
-
-const count = computed(() => filteredItems.value.length);
-```
-
-### Writable Computed
-
-```typescript
-const firstName = ref('John');
-const lastName = ref('Doe');
-
-const fullName = computed({
-  get: () => `${firstName.value} ${lastName.value}`,
-  set: (newValue: string) => {
-    const [first, ...rest] = newValue.split(' ');
-    firstName.value = first;
-    lastName.value = rest.join(' ');
-  },
-});
-```
-
-## watch()
-
-Watches specific reactive sources and runs a callback when they change.
-
-```typescript
-import { ref, watch } from 'vue';
-
-const query = ref('');
-
-// Watch a single ref
-watch(query, (newValue, oldValue) => {
-  console.log(`Query changed from "${oldValue}" to "${newValue}"`);
-});
-
-// Watch multiple sources
-const page = ref(1);
-watch([query, page], ([newQuery, newPage], [oldQuery, oldPage]) => {
-  fetchResults(newQuery, newPage);
-});
-
-// Watch with options
-watch(query, (newValue) => {
-  fetchResults(newValue, page.value);
-}, {
-  immediate: true,  // Run immediately with current value
-  deep: true,        // Deep watch objects/arrays
-  once: true,        // Run only once then stop
-  flush: 'post',     // Run after DOM updates
-});
-```
-
-### Watching Reactive Object Properties
-
-```typescript
-const state = reactive({ count: 0, nested: { value: 'hello' } });
-
-// Must use a getter for specific properties
-watch(
-  () => state.count,
-  (newCount) => { console.log('count:', newCount); }
-);
-
-// Deep watch an entire reactive object
-watch(state, (newState) => {
-  // Fires on any nested change
-});
-```
-
-## watchEffect()
-
-Automatically tracks all reactive dependencies accessed during execution.
-
-```typescript
-import { ref, watchEffect } from 'vue';
-
-const query = ref('');
-const page = ref(1);
-const results = ref([]);
-
-// Automatically tracks query and page
-watchEffect(async () => {
-  const response = await fetch(`/api/search?q=${query.value}&page=${page.value}`);
-  results.value = await response.json();
-});
-```
-
-### watchEffect vs. watch
-
-| `watchEffect` | `watch` |
-|--------------|---------|
-| Runs immediately | Lazy by default (`immediate: false`) |
-| Auto-tracks all dependencies | Explicitly specifies sources |
-| No access to previous values | Receives both old and new values |
-| Best for side effects with many dependencies | Best for responding to specific changes |
-
-### Cleanup
-
-```typescript
-watchEffect((onCleanup) => {
-  const controller = new AbortController();
-
-  fetch(`/api/data?q=${query.value}`, { signal: controller.signal })
-    .then(r => r.json())
-    .then(data => { results.value = data; });
-
-  onCleanup(() => controller.abort()); // Abort on re-run or unmount
-});
-```
-
-## defineModel() (Vue 3.4+/3.5)
-
-Simplifies two-way binding (`v-model`) on custom components.
-
-```vue
-<!-- TextInput.vue -->
-<script setup lang="ts">
-const modelValue = defineModel<string>({ default: '' });
-</script>
-
-<template>
-  <input v-model="modelValue" />
-</template>
-```
-
-```vue
-<!-- Parent.vue -->
-<script setup lang="ts">
-import { ref } from 'vue';
-const name = ref('');
-</script>
-
-<template>
-  <TextInput v-model="name" />
-</template>
-```
-
-### Named Models
-
-```vue
-<!-- DateRange.vue -->
-<script setup lang="ts">
-const start = defineModel<string>('start', { required: true });
-const end = defineModel<string>('end', { required: true });
-</script>
-
-<template>
-  <input type="date" v-model="start" />
-  <input type="date" v-model="end" />
-</template>
-```
-
-```vue
-<!-- Parent -->
-<DateRange v-model:start="startDate" v-model:end="endDate" />
-```
-
-## useTemplateRef() (Vue 3.5)
-
-Explicitly accesses template refs with type safety.
-
-```vue
-<script setup lang="ts">
-import { useTemplateRef, onMounted } from 'vue';
-
-const inputRef = useTemplateRef<HTMLInputElement>('search-input');
-
-onMounted(() => {
-  inputRef.value?.focus();
-});
-</script>
-
-<template>
-  <input ref="search-input" type="text" />
-</template>
-```
-
-## Common Pitfalls
-
-1. **Destructuring reactive objects** -- `const { name } = reactive({ name: 'Vue' })` loses reactivity. Use `toRefs()` or keep the object intact.
-2. **Reassigning reactive** -- `form = { name: '' }` breaks reactivity. Mutate properties instead: `form.name = ''`.
-3. **Using `ref()` and forgetting `.value`** -- In JavaScript/TypeScript, always use `.value`. Templates unwrap automatically.
-4. **Deep watching large objects** -- `deep: true` on large reactive trees is expensive. Watch specific properties instead.
-5. **Side effects in computed** -- `computed()` must be pure. Use `watchEffect()` for side effects.

package/workflows/workflows/agent-environment-setup/platforms/copilot/skills/vuejs/references/router-nuxt.md

@@ -1,328 +0,0 @@
-# Vue Router & Nuxt 3 Reference
-
-## Overview
-
-Vue Router 4 provides client-side routing for Vue 3 applications. Nuxt 3 builds on Vue Router with file-based routing, auto-imports, server-side rendering, and per-route rendering strategies. This reference covers both standalone Vue Router and Nuxt 3 routing.
-
-## Vue Router Setup
-
-### Basic Configuration
-
-```typescript
-// router/index.ts
-import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router';
-
-const routes: RouteRecordRaw[] = [
-  { path: '/', component: () => import('@/pages/Home.vue') },
-  { path: '/about', component: () => import('@/pages/About.vue') },
-  {
-    path: '/products/:id',
-    component: () => import('@/pages/ProductDetail.vue'),
-    props: true, // Pass params as props
-  },
-  {
-    path: '/dashboard',
-    component: () => import('@/layouts/DashboardLayout.vue'),
-    meta: { requiresAuth: true },
-    children: [
-      { path: '', component: () => import('@/pages/Dashboard.vue') },
-      { path: 'settings', component: () => import('@/pages/Settings.vue') },
-    ],
-  },
-  { path: '/:pathMatch(.*)*', component: () => import('@/pages/NotFound.vue') },
-];
-
-export const router = createRouter({
-  history: createWebHistory(),
-  routes,
-  scrollBehavior(to, from, savedPosition) {
-    return savedPosition ?? { top: 0 };
-  },
-});
-```
-
-## Navigation Guards
-
-### Global Guard
-
-```typescript
-router.beforeEach(async (to, from) => {
-  const authStore = useAuthStore();
-
-  if (to.meta.requiresAuth && !authStore.isAuthenticated) {
-    return { path: '/login', query: { redirect: to.fullPath } };
-  }
-
-  if (to.path === '/login' && authStore.isAuthenticated) {
-    return '/dashboard';
-  }
-});
-```
-
-### Composition API Guards
-
-```vue
-<script setup lang="ts">
-import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';
-
-const hasUnsavedChanges = ref(false);
-
-onBeforeRouteLeave((to, from) => {
-  if (hasUnsavedChanges.value) {
-    const answer = window.confirm('You have unsaved changes. Leave anyway?');
-    if (!answer) return false;
-  }
-});
-
-onBeforeRouteUpdate(async (to, from) => {
-  // Route params changed (e.g., /products/1 -> /products/2)
-  if (to.params.id !== from.params.id) {
-    await fetchProduct(to.params.id as string);
-  }
-});
-</script>
-```
-
-### Per-Route Guard
-
-```typescript
-{
-  path: '/admin',
-  component: AdminLayout,
-  beforeEnter: (to, from) => {
-    const auth = useAuthStore();
-    if (auth.user?.role !== 'admin') {
-      return { path: '/forbidden' };
-    }
-  },
-}
-```
-
-## Dynamic Route Matching
-
-```typescript
-// Required param
-{ path: '/users/:id' }          // /users/123
-
-// Optional param
-{ path: '/users/:id?' }         // /users or /users/123
-
-// Regex constraint
-{ path: '/posts/:id(\\d+)' }    // /posts/123 (numbers only)
-
-// Repeatable params
-{ path: '/docs/:chapters+' }    // /docs/a/b/c
-
-// Optional repeatable
-{ path: '/docs/:chapters*' }    // /docs or /docs/a/b
-
-// Catch-all
-{ path: '/:pathMatch(.*)*' }    // Everything
-```
-
-## Lazy Loading Routes
-
-```typescript
-// Each route is a separate chunk
-const routes = [
-  {
-    path: '/dashboard',
-    component: () => import('@/pages/Dashboard.vue'),
-  },
-  {
-    path: '/reports',
-    // Named chunk for debugging
-    component: () => import(/* webpackChunkName: "reports" */ '@/pages/Reports.vue'),
-  },
-];
-```
-
----
-
-## Nuxt 3 File-Based Routing
-
-### Route Conventions
-
-```
-pages/
-  index.vue               ->  /
-  about.vue               ->  /about
-  products/
-    index.vue             ->  /products
-    [id].vue              ->  /products/123
-  blog/
-    [...slug].vue         ->  /blog/any/path/here
-  [[optional]]/
-    index.vue             ->  / or /optional
-```
-
-### Dynamic Parameters
-
-```vue
-<!-- pages/products/[id].vue -->
-<script setup lang="ts">
-const route = useRoute();
-const id = computed(() => route.params.id as string);
-
-// Or use typed route params
-const { data } = await useFetch(`/api/products/${id.value}`);
-</script>
-```
-
-## definePageMeta
-
-```vue
-<script setup lang="ts">
-definePageMeta({
-  layout: 'admin',
-  middleware: ['auth', 'admin'],
-  title: 'Admin Dashboard',
-  validate: async (route) => {
-    return /^\d+$/.test(route.params.id as string);
-  },
-  keepalive: true,
-});
-</script>
-```
-
-## Nuxt Middleware
-
-### Route Middleware
-
-```typescript
-// middleware/auth.ts
-export default defineNuxtRouteMiddleware((to, from) => {
-  const { loggedIn } = useUserSession();
-
-  if (!loggedIn.value) {
-    return navigateTo('/login');
-  }
-});
-```
-
-### Global Middleware
-
-```typescript
-// middleware/analytics.global.ts (note: .global suffix)
-export default defineNuxtRouteMiddleware((to, from) => {
-  trackPageView(to.fullPath);
-});
-```
-
-### Inline Middleware
-
-```vue
-<script setup lang="ts">
-definePageMeta({
-  middleware: [
-    function (to, from) {
-      const auth = useAuth();
-      if (!auth.isAdmin.value) {
-        return navigateTo('/');
-      }
-    },
-  ],
-});
-</script>
-```
-
-## Nuxt Data Fetching
-
-### useFetch
-
-```vue
-<script setup lang="ts">
-const { data, status, error, refresh } = await useFetch('/api/products', {
-  key: 'products',
-  query: { page: 1 },
-  watch: [page],      // Re-fetch when page changes
-  default: () => [],  // Default value during loading
-  transform: (data) => data.map(normalize), // Transform response
-});
-</script>
-```
-
-### useAsyncData
-
-```vue
-<script setup lang="ts">
-const { data: user } = await useAsyncData('user', () => {
-  return $fetch('/api/user/me');
-});
-```
-
-### useLazyFetch
-
-```vue
-<script setup lang="ts">
-// Does not block navigation -- component renders immediately with null data
-const { data, status } = useLazyFetch('/api/slow-endpoint');
-</script>
-
-<template>
-  <div v-if="status === 'pending'">Loading...</div>
-  <div v-else>{{ data }}</div>
-</template>
-```
-
-## Nuxt Route Rules
-
-Configure per-route rendering strategies in `nuxt.config.ts`:
-
-```typescript
-export default defineNuxtConfig({
-  routeRules: {
-    '/': { prerender: true },                    // SSG at build time
-    '/api/**': { cors: true },                   // CORS headers
-    '/blog/**': { swr: 3600 },                   // Stale-while-revalidate (1 hour)
-    '/admin/**': { ssr: false },                 // Client-only (SPA)
-    '/dashboard/**': { isr: 600 },               // ISR (10 minutes)
-    '/old-page': { redirect: '/new-page' },      // Redirect
-  },
-});
-```
-
-### Rendering Strategies
-
-| Strategy | Config | When to Use |
-|----------|--------|------------|
-| SSR | `{ ssr: true }` (default) | Dynamic, personalized pages |
-| SSG | `{ prerender: true }` | Static pages (about, pricing) |
-| SPA | `{ ssr: false }` | Admin dashboards, no SEO needed |
-| SWR | `{ swr: seconds }` | Blog posts, product listings |
-| ISR | `{ isr: seconds }` | Frequently updated content |
-
-## Nuxt Layouts
-
-```vue
-<!-- layouts/default.vue -->
-<template>
-  <div>
-    <AppHeader />
-    <main>
-      <slot /> <!-- Page content renders here -->
-    </main>
-    <AppFooter />
-  </div>
-</template>
-```
-
-```vue
-<!-- layouts/admin.vue -->
-<template>
-  <div class="flex">
-    <AdminSidebar />
-    <main class="flex-1">
-      <slot />
-    </main>
-  </div>
-</template>
-```
-
-## Common Pitfalls
-
-1. **Not using lazy loading** -- Loading all routes eagerly inflates the initial bundle
-2. **Missing catch-all route** -- Users hitting unknown paths get a blank page instead of a 404
-3. **Mutating `route.params` directly** -- Route params are read-only; use `router.push()` for navigation
-4. **Forgetting `await` on `useFetch`** -- Without `await`, the page renders before data is available during SSR
-5. **Route rules conflicts** -- More specific rules should come after general ones; Nuxt processes them in order