vue/production-readiness

What problem does it solve?

This Skill prevents slow and bloated production builds of @tanstack/vue-table by teaching you how to tree-shake features correctly and structure Vue state reads so components re-render only when they need to.

Core Features & Use Cases

• Tree-shake only what you render: define _features with tableFeatures({ ... }) (avoid stockFeatures) so unused table code is not bundled.
• Stabilize identities at module scope: keep _features, _rowModels, columnHelper, and columns outside components to avoid reactive churn and unnecessary setOptions cycles.
• Narrow reactivity with selectors: use the useTable(opts, selector) second argument or per-slice reads with useSelector(table.atoms.<slice>) / Vue computed to reduce re-renders in large datagrids.
• Use Vue-appropriate patterns: understand when table.Subscribe is (and isn’t) needed in Vue compared to React.

Quick Start

Ask the AI to refactor your Vue table setup so it tree-shakes features, hoists _features/_rowModels/columns to module scope, and narrows useTable state selection to only the slices your UI renders.