CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl-labs/vue-best-practices

Vue 3 patterns — Composition API, composables, reactivity, component design,

97

1.33x
Quality

93%

Does it follow best practices?

Impact

99%

1.33x

Average score across 8 eval scenarios

SecuritybySnyk

Passed

No known issues

Overview
Quality
Evals
Security
Files

criteria.jsonevals/scenario-2/

{
  "context": "Tests whether the agent extracts async data-fetching logic into a properly structured Vue 3 composable, follows naming and file placement conventions, manages loading/error state with try/catch/finally, and avoids the reactive-object replacement pitfall.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "useThing naming convention",
      "description": "The composable function is named with the `use` prefix (e.g. `useOrders`, `useCustomers`)",
      "max_score": 8
    },
    {
      "name": "composables/ folder",
      "description": "The composable file is placed inside a `composables/` directory (e.g. `composables/useThing.ts`)",
      "max_score": 8
    },
    {
      "name": "loading ref exposed",
      "description": "The composable declares a `loading` ref (boolean) and includes it in the returned object",
      "max_score": 8
    },
    {
      "name": "error ref exposed",
      "description": "The composable declares an `error` ref (string or null) and includes it in the returned object",
      "max_score": 8
    },
    {
      "name": "try/catch/finally pattern",
      "description": "The async fetch function uses a try/catch/finally block: sets loading true before the call, catches errors into the error ref, and sets loading false in the finally block",
      "max_score": 12
    },
    {
      "name": "Reset error before fetch",
      "description": "The error ref is set to null at the start of each fetch attempt (before the try block or at the beginning of the try block), so stale errors are cleared on retry",
      "max_score": 8
    },
    {
      "name": "Reload function returned",
      "description": "The composable returns a reload/refresh function so consumers can trigger a re-fetch manually",
      "max_score": 8
    },
    {
      "name": "Object.assign for reactive reset",
      "description": "If a `reactive()` object is reset or bulk-updated anywhere in the composable or component, it uses `Object.assign(target, newValues)` rather than reassigning the variable directly",
      "max_score": 12
    },
    {
      "name": "ref for primitive state",
      "description": "Primitive values (booleans, strings, numbers) used as reactive state are declared with `ref()`, not `reactive()`",
      "max_score": 8
    },
    {
      "name": "Destructured in component",
      "description": "The consuming component destructures the composable return value (e.g. `const { items, loading, error, reload } = useThing()`)",
      "max_score": 10
    },
    {
      "name": "onMounted triggers load",
      "description": "Data loading is triggered inside `onMounted` within the composable so it runs automatically when the component using it mounts",
      "max_score": 10
    }
  ]
}

evals

tile.json