@pythoughts/vue-skills-mcp 0.1.0

package/skills/vue-debug-guides/reference/rendering-render-function-h-import-vue3.md

@@ -0,0 +1,148 @@
+---
+title: Import h Globally in Vue 3 Render Functions
+impact: HIGH
+impactDescription: Vue 3 requires explicit h import; using Vue 2 patterns causes runtime errors
+type: gotcha
+tags: [vue3, render-function, migration, h, vnode, breaking-change]
+---
+
+# Import h Globally in Vue 3 Render Functions
+
+**Impact: HIGH** - In Vue 2, the `h` function (createElement) was passed as an argument to render functions. In Vue 3, `h` must be explicitly imported from 'vue'. Using Vue 2 patterns causes runtime errors.
+
+## Task Checklist
+
+- [ ] Import `h` from 'vue' at the top of files using render functions
+- [ ] Remove the `h` parameter from render function signatures
+- [ ] Update all render functions when migrating from Vue 2
+
+**Incorrect (Vue 2 pattern - broken in Vue 3):**
+```js
+// WRONG: Vue 2 pattern - h is not passed as argument in Vue 3
+export default {
+  render(h) {  // h is undefined in Vue 3!
+    return h('div', [
+      h('span', 'Hello')
+    ])
+  }
+}
+
+// WRONG: Using createElement alias from Vue 2
+export default {
+  render(createElement) {  // Also undefined
+    return createElement('div', 'Hello')
+  }
+}
+```
+
+**Correct (Vue 3 pattern):**
+```js
+// CORRECT: Import h from vue
+import { h } from 'vue'
+
+export default {
+  render() {
+    return h('div', [
+      h('span', 'Hello')
+    ])
+  }
+}
+```
+
+## With Composition API
+
+```js
+import { h, ref } from 'vue'
+
+export default {
+  setup() {
+    const count = ref(0)
+
+    // Return a render function from setup
+    return () => h('div', [
+      h('button', { onClick: () => count.value++ }, `Count: ${count.value}`)
+    ])
+  }
+}
+```
+
+## With script setup (Not Recommended)
+
+```vue
+<script setup>
+import { h, ref } from 'vue'
+
+const count = ref(0)
+
+// Cannot return render function from script setup
+// Must use a separate render option or template
+</script>
+
+<!-- script setup typically uses templates, not render functions -->
+<template>
+  <div>
+    <button @click="count++">Count: {{ count }}</button>
+  </div>
+</template>
+```
+
+If you need render functions with `<script setup>`, use the `render` option:
+
+```vue
+<script>
+import { h, ref } from 'vue'
+
+export default {
+  setup() {
+    const count = ref(0)
+    return () => h('button', { onClick: () => count.value++ }, count.value)
+  }
+}
+</script>
+```
+
+## Component Resolution Change
+
+In Vue 3, you must also explicitly resolve components:
+
+**Incorrect:**
+```js
+// Vue 2: Could use string names for registered components
+render(h) {
+  return h('my-component', { props: { value: 1 } })
+}
+```
+
+**Correct:**
+```js
+import { h, resolveComponent } from 'vue'
+
+export default {
+  render() {
+    // Must resolve component by name
+    const MyComponent = resolveComponent('my-component')
+    return h(MyComponent, { value: 1 })
+  }
+}
+
+// Or import the component directly (preferred)
+import { h } from 'vue'
+import MyComponent from './MyComponent.vue'
+
+export default {
+  render() {
+    return h(MyComponent, { value: 1 })
+  }
+}
+```
+
+## Why This Changed
+
+Vue 3's `h` is globally importable to:
+1. Enable tree-shaking (unused features can be removed)
+2. Support better TypeScript inference
+3. Allow use outside of component context
+
+## Reference
+- [Vue 3 Migration Guide - Render Function API](https://v3-migration.vuejs.org/breaking-changes/render-function-api.html)
+- [Vue.js Render Functions & JSX](https://vuejs.org/guide/extras/render-function.html)

package/skills/vue-debug-guides/reference/rendering-render-function-return-from-setup.md

@@ -0,0 +1,148 @@
+---
+title: Return Render Function from setup(), Not Direct VNodes
+impact: HIGH
+impactDescription: Returning a vnode directly from setup makes it static; returning a function enables reactive updates
+type: gotcha
+tags: [vue3, render-function, composition-api, setup, reactivity]
+---
+
+# Return Render Function from setup(), Not Direct VNodes
+
+**Impact: HIGH** - When using render functions with the Composition API, you must return a function that returns vnodes, not the vnodes directly. Returning vnodes directly creates a static render that never updates when reactive state changes.
+
+## Task Checklist
+
+- [ ] Always return an arrow function from setup() when using render functions
+- [ ] Never return h() calls directly from setup()
+- [ ] Ensure reactive values are accessed inside the returned function
+
+**Incorrect:**
+```js
+import { h, ref } from 'vue'
+
+export default {
+  setup() {
+    const count = ref(0)
+    const increment = () => count.value++
+
+    // WRONG: Returns a static vnode, created once
+    // Clicking the button updates count.value, but the DOM never changes!
+    return h('div', [
+      h('p', `Count: ${count.value}`),  // Captures count.value at setup time (0)
+      h('button', { onClick: increment }, 'Increment')
+    ])
+  }
+}
+```
+
+**Correct:**
+```js
+import { h, ref } from 'vue'
+
+export default {
+  setup() {
+    const count = ref(0)
+    const increment = () => count.value++
+
+    // CORRECT: Returns a render function
+    // Vue calls this function on every reactive update
+    return () => h('div', [
+      h('p', `Count: ${count.value}`),  // Re-evaluated each render
+      h('button', { onClick: increment }, 'Increment')
+    ])
+  }
+}
+```
+
+## Why This Happens
+
+```js
+// What Vue does internally:
+
+// WRONG approach - setup runs once:
+const result = setup()
+// result is a vnode { type: 'div', children: [...] }
+// Vue renders this once, then has no way to re-render
+
+// CORRECT approach - setup returns a function:
+const renderFn = setup()
+// renderFn is () => h('div', ...)
+// Vue calls renderFn() on mount
+// Vue calls renderFn() again whenever dependencies change
+```
+
+## Common Mistake: Mixing Template and Render Function
+
+```vue
+<script setup>
+import { h, ref } from 'vue'
+
+const count = ref(0)
+
+// WRONG: Can't use render functions in script setup with templates
+// This h() call does nothing
+const node = h('div', count.value)
+</script>
+
+<template>
+  <!-- Template is used, render function is ignored -->
+  <div>{{ count }}</div>
+</template>
+```
+
+If you need a render function with Composition API, don't use `<script setup>`:
+
+```vue
+<script>
+import { h, ref } from 'vue'
+
+export default {
+  setup() {
+    const count = ref(0)
+    return () => h('div', count.value)
+  }
+}
+</script>
+<!-- No template - render function is used -->
+```
+
+## Exposing Values While Using Render Functions
+
+```js
+import { h, ref } from 'vue'
+
+export default {
+  setup(props, { expose }) {
+    const count = ref(0)
+    const reset = () => { count.value = 0 }
+
+    // Expose methods for parent refs
+    expose({ reset })
+
+    // Still return the render function
+    return () => h('div', count.value)
+  }
+}
+```
+
+## With Slots
+
+```js
+import { h, ref } from 'vue'
+
+export default {
+  setup(props, { slots }) {
+    const count = ref(0)
+
+    return () => h('div', [
+      h('p', `Count: ${count.value}`),
+      // Slots must also be called inside the render function
+      slots.default?.()
+    ])
+  }
+}
+```
+
+## Reference
+- [Vue.js Render Functions with Composition API](https://vuejs.org/guide/extras/render-function.html#render-functions-jsx)
+- [Vue.js Composition API setup()](https://vuejs.org/api/composition-api-setup.html)

package/skills/vue-debug-guides/reference/rendering-render-function-slots-as-functions.md

@@ -0,0 +1,168 @@
+---
+title: Pass Slots as Functions in Render Functions, Not Direct Children
+impact: HIGH
+impactDescription: Passing slot content incorrectly causes slots to not render or be treated as props
+type: gotcha
+tags: [vue3, render-function, slots, children, vnode]
+---
+
+# Pass Slots as Functions in Render Functions, Not Direct Children
+
+**Impact: HIGH** - When creating component vnodes with `h()`, children must be passed as slot functions, not as direct children. Passing children directly may cause them to be interpreted as props or fail to render.
+
+## Task Checklist
+
+- [ ] Pass slot content as functions: `{ default: () => [...] }`
+- [ ] Use `null` for props when only passing slots to avoid misinterpretation
+- [ ] For default slot only, a single function can be passed directly
+- [ ] For named slots, use an object with slot function properties
+
+**Incorrect:**
+```js
+import { h } from 'vue'
+import MyComponent from './MyComponent.vue'
+
+// WRONG: Children array may be misinterpreted
+h(MyComponent, [
+  h('span', 'Slot content')  // May not render as expected
+])
+
+// WRONG: Named slots as direct properties
+h(MyComponent, {
+  header: h('h1', 'Title'),  // This is a prop, not a slot!
+  default: h('p', 'Content')  // This is also a prop
+})
+```
+
+**Correct:**
+```js
+import { h } from 'vue'
+import MyComponent from './MyComponent.vue'
+
+// CORRECT: Default slot as function
+h(MyComponent, null, {
+  default: () => h('span', 'Slot content')
+})
+
+// CORRECT: Single default slot shorthand
+h(MyComponent, null, () => h('span', 'Slot content'))
+
+// CORRECT: Named slots as functions
+h(MyComponent, null, {
+  header: () => h('h1', 'Title'),
+  default: () => h('p', 'Content'),
+  footer: () => [
+    h('span', 'Footer item 1'),
+    h('span', 'Footer item 2')
+  ]
+})
+
+// CORRECT: With props AND slots
+h(MyComponent, { size: 'large' }, {
+  default: () => 'Button Text'
+})
+```
+
+## Why Functions?
+
+Slots in Vue 3 are functions for lazy evaluation:
+
+```js
+// Slots are called by the child component when needed
+// This enables:
+// 1. Scoped slots (passing data back)
+// 2. Conditional rendering (slot not called if not used)
+// 3. Proper reactivity tracking
+
+h(MyList, { items }, {
+  // Scoped slot - receives data from child
+  item: ({ item, index }) => h('li', `${index}: ${item.name}`)
+})
+```
+
+## The null Props Gotcha
+
+When passing only slots, always use `null` for props:
+
+```js
+// WRONG: Slots object interpreted as props!
+h(MyComponent, {
+  default: () => 'Hello'
+})
+// MyComponent receives: props.default = () => 'Hello'
+
+// CORRECT: null signals "no props, next arg is slots"
+h(MyComponent, null, {
+  default: () => 'Hello'
+})
+// MyComponent receives slot correctly
+```
+
+## Forwarding Slots from Parent
+
+```js
+export default {
+  setup(props, { slots }) {
+    return () => h(ChildComponent, null, {
+      // Forward all slots from parent
+      ...slots,
+
+      // Or forward specific slots
+      default: slots.default,
+      header: slots.header
+    })
+  }
+}
+```
+
+## Scoped Slots in Render Functions
+
+```js
+// Parent: Receives data from child via slot props
+h(DataTable, { data: items }, {
+  row: (slotProps) => h('tr', [
+    h('td', slotProps.item.name),
+    h('td', slotProps.item.value)
+  ])
+})
+
+// Child (DataTable): Calls slot with data
+export default {
+  props: ['data'],
+  setup(props, { slots }) {
+    return () => h('table', [
+      h('tbody',
+        props.data.map(item =>
+          // Pass data to slot function
+          slots.row?.({ item })
+        )
+      )
+    ])
+  }
+}
+```
+
+## Common Patterns
+
+```js
+// Wrapper component forwarding slots
+h('div', { class: 'wrapper' }, [
+  h(InnerComponent, null, slots)
+])
+
+// Conditional slot rendering
+h('div', [
+  slots.header?.(),  // Optional chaining - only render if slot provided
+  h('main', slots.default?.()),
+  slots.footer?.()
+])
+
+// Slot with fallback content
+h('div', [
+  slots.default?.() ?? h('p', 'Default content when slot not provided')
+])
+```
+
+## Reference
+- [Vue.js Render Functions - Passing Slots](https://vuejs.org/guide/extras/render-function.html#passing-slots)
+- [Vue.js Render Functions - Children](https://vuejs.org/guide/extras/render-function.html#children)

package/skills/vue-debug-guides/reference/rendering-resolve-component-for-string-names.md

@@ -0,0 +1,231 @@
+---
+title: Use resolveComponent for String Component Names in Render Functions
+impact: HIGH
+impactDescription: String component names don't work in Vue 3 render functions; causes silent failures or runtime errors
+type: gotcha
+tags: [vue3, render-function, components, resolveComponent, migration]
+---
+
+# Use resolveComponent for String Component Names in Render Functions
+
+**Impact: HIGH** - In Vue 2, render functions could use string names for globally or locally registered components. In Vue 3, you must either import components directly or use `resolveComponent()`. Using string names causes components to render as HTML elements or fail silently.
+
+## Task Checklist
+
+- [ ] Import components directly when possible (preferred)
+- [ ] Use `resolveComponent()` for dynamically registered components
+- [ ] Use `resolveDynamicComponent()` for `<component :is="">` equivalent
+- [ ] Call `resolveComponent()` inside `setup()` or the render function
+- [ ] Handle the case when component is not found
+
+**Incorrect:**
+```js
+import { h } from 'vue'
+
+export default {
+  render() {
+    // WRONG: String names don't resolve to components
+    return h('div', [
+      h('my-component', { value: 1 }),  // Renders <my-component> HTML element!
+      h('router-link', { to: '/' }, 'Home')  // Also fails
+    ])
+  }
+}
+```
+
+**Correct (Direct Import - Preferred):**
+```js
+import { h } from 'vue'
+import MyComponent from './MyComponent.vue'
+import { RouterLink } from 'vue-router'
+
+export default {
+  render() {
+    return h('div', [
+      h(MyComponent, { value: 1 }),
+      h(RouterLink, { to: '/' }, () => 'Home')
+    ])
+  }
+}
+```
+
+**Correct (resolveComponent for Registered Components):**
+```js
+import { h, resolveComponent } from 'vue'
+
+export default {
+  components: {
+    MyComponent: () => import('./MyComponent.vue')
+  },
+
+  setup() {
+    // Resolve inside setup - component context is available
+    const MyComponent = resolveComponent('MyComponent')
+
+    return () => h('div', [
+      h(MyComponent, { value: 1 })
+    ])
+  }
+}
+
+// Or resolve inside render function
+export default {
+  render() {
+    const MyComponent = resolveComponent('MyComponent')
+    const RouterLink = resolveComponent('RouterLink')
+
+    return h('div', [
+      h(MyComponent, { value: 1 }),
+      h(RouterLink, { to: '/' }, () => 'Home')
+    ])
+  }
+}
+```
+
+## When to Use Each Approach
+
+| Approach | Use When |
+|----------|----------|
+| Direct Import | Component is known at build time (most common) |
+| `resolveComponent()` | Component is registered globally or locally by name |
+| `resolveComponent()` | Dynamic component selection from registered set |
+
+## Handling Missing Components
+
+```js
+import { h, resolveComponent } from 'vue'
+
+export default {
+  setup() {
+    // resolveComponent returns the component or the string name if not found
+    const DynamicComponent = resolveComponent('MaybeRegistered')
+
+    // Check if resolution succeeded
+    if (typeof DynamicComponent === 'string') {
+      console.warn(`Component "${DynamicComponent}" not found`)
+    }
+
+    return () => h(DynamicComponent, { value: 1 })
+  }
+}
+```
+
+## Dynamic Component Selection
+
+```js
+import { h, resolveComponent, computed } from 'vue'
+
+export default {
+  props: ['componentName'],
+
+  setup(props) {
+    // For truly dynamic components, resolve in render function
+    return () => {
+      const Component = resolveComponent(props.componentName)
+      return h(Component, { /* props */ })
+    }
+  }
+}
+```
+
+For the equivalent of `<component :is="componentName">`, use `resolveDynamicComponent`:
+
+```js
+import { h, resolveDynamicComponent } from 'vue'
+
+export default {
+  props: ['componentType'],
+  setup(props) {
+    return () => {
+      // Resolves string names, component objects, or built-in elements
+      const component = resolveDynamicComponent(props.componentType)
+      return h(component, { /* props */ })
+    }
+  }
+}
+```
+
+## Practical Example: Tab Component
+
+```js
+import { h, resolveComponent, ref } from 'vue'
+
+export default {
+  setup() {
+    const currentTab = ref('TabA')
+    const tabs = ['TabA', 'TabB', 'TabC']
+
+    return () => h('div', [
+      // Tab buttons
+      h('div', { class: 'tabs' },
+        tabs.map(tab =>
+          h('button', {
+            key: tab,
+            class: { active: currentTab.value === tab },
+            onClick: () => currentTab.value = tab
+          }, tab)
+        )
+      ),
+
+      // Dynamic component based on current tab
+      h(resolveComponent(currentTab.value))
+    ])
+  }
+}
+```
+
+## Resolving Built-in Components
+
+For built-in components like `<Transition>` or `<KeepAlive>`, import them directly from Vue:
+
+```js
+import { h, Transition, KeepAlive, Teleport, Suspense } from 'vue'
+
+export default {
+  setup() {
+    return () => h(Transition, { name: 'fade' }, () =>
+      h('div', 'Content')
+    )
+  }
+}
+```
+
+## Resolving Directives
+
+Similar pattern for custom directives:
+
+```js
+import { h, resolveDirective, withDirectives } from 'vue'
+
+export default {
+  render() {
+    const vFocus = resolveDirective('focus')
+
+    return withDirectives(
+      h('input', { type: 'text' }),
+      [[vFocus]]
+    )
+  }
+}
+```
+
+## Migration from Vue 2
+
+```js
+// Vue 2 (worked with registered components)
+render(h) {
+  return h('my-component', { props: { value: 1 } })
+}
+
+// Vue 3 (must resolve or import)
+import { h, resolveComponent } from 'vue'
+
+render() {
+  const MyComponent = resolveComponent('my-component')
+  return h(MyComponent, { value: 1 })  // Note: props go directly, not in 'props' key
+}
+```
+
+## Reference
+- [Vue 3 Migration - Render Function API](https://v3-migration.vuejs.org/breaking-changes/render-function-api.html)
+- [Vue.js Render Function API - resolveComponent](https://vuejs.org/api/render-function.html#resolvecomponent)