General API

const version: string

import { version } from 'vue'

console.log(version) // '3.5.0'

function nextTick(): Promise<void>
function nextTick<T, R>(this: T, fn: (this: T) => R | Promise<R>): Promise<R>

import { ref, nextTick } from 'vue'

const count = ref(0)

async function increment() {
  count.value++
  
  // DOM not yet updated
  console.log(document.getElementById('counter').textContent) // 0
  
  await nextTick()
  
  // DOM is now updated
  console.log(document.getElementById('counter').textContent) // 1
}

import { nextTick } from 'vue'

count.value++

nextTick(() => {
  // Access updated DOM
  console.log('DOM updated')
})

export default {
  methods: {
    async updateAndLog() {
      this.message = 'Updated'
      await this.$nextTick()
      console.log(this.$el.textContent) // 'Updated'
    }
  }
}

// Overload 1: Direct setup function
function defineComponent<Props, E extends EmitsOptions = {}>(
  setup: (props: Props, ctx: SetupContext<E>) => RenderFunction | Promise<RenderFunction>,
  options?: Pick<ComponentOptions, 'name' | 'inheritAttrs'> & {
    props?: ComponentObjectPropsOptions<Props> | (keyof Props)[]
    emits?: E | string[]
    slots?: SlotsType
  }
): DefineSetupFnComponent<Props, E>

// Overload 2: Options object
function defineComponent<Props, RawBindings, D, C, M>(options: ComponentOptions): DefineComponent

import { defineComponent } from 'vue'

export default defineComponent({
  name: 'MyComponent',
  props: {
    message: String,
    count: Number
  },
  data() {
    return {
      localState: 0
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  methods: {
    increment() {
      this.localState++
    }
  }
})

import { defineComponent, ref } from 'vue'

export default defineComponent(
  (props) => {
    const count = ref(0)
    
    function increment() {
      count.value++
    }
    
    return () => (
      <div onClick={increment}>
        {props.message}: {count.value}
      </div>
    )
  },
  {
    props: {
      message: String
    }
  }
)

import { defineComponent, type PropType } from 'vue'

interface User {
  id: number
  name: string
}

export default defineComponent({
  props: {
    user: {
      type: Object as PropType<User>,
      required: true
    },
    tags: {
      type: Array as PropType<string[]>,
      default: () => []
    }
  },
  setup(props) {
    // props.user is typed as User
    // props.tags is typed as string[]
    console.log(props.user.name)
  }
})

type AsyncComponentLoader<T = any> = () => Promise<T | { default: T }>

interface AsyncComponentOptions<T = any> {
  loader: AsyncComponentLoader<T>
  loadingComponent?: Component
  errorComponent?: Component
  delay?: number
  timeout?: number
  suspensible?: boolean
  hydrate?: HydrationStrategy
  onError?: (
    error: Error,
    retry: () => void,
    fail: () => void,
    attempts: number
  ) => any
}

function defineAsyncComponent<T extends Component = { new (): ComponentPublicInstance }>(
  source: AsyncComponentLoader<T> | AsyncComponentOptions<T>
): T

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
)

import { defineAsyncComponent } from 'vue'
import LoadingComponent from './LoadingComponent.vue'
import ErrorComponent from './ErrorComponent.vue'

const AsyncComp = defineAsyncComponent({
  // The loader function
  loader: () => import('./components/HeavyComponent.vue'),
  
  // A component to use while the async component is loading
  loadingComponent: LoadingComponent,
  
  // Delay before showing the loading component. Default: 200ms.
  delay: 200,
  
  // A component to use if the load fails
  errorComponent: ErrorComponent,
  
  // Timeout for loading. Default: Infinity.
  timeout: 3000,
  
  // Whether to use Suspense. Default: true
  suspensible: false,
  
  // Error handler
  onError(error, retry, fail, attempts) {
    if (error.message.match(/fetch/) && attempts <= 3) {
      // Retry on fetch errors, max 3 attempts
      retry()
    } else {
      fail()
    }
  }
})

<template>
  <Suspense>
    <AsyncComp />
    <template #fallback>
      Loading...
    </template>
  </Suspense>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>
  import('./HeavyComponent.vue')
)
</script>

import { defineAsyncComponent } from 'vue'

const routes = [
  {
    path: '/about',
    component: defineAsyncComponent(() => import('./views/About.vue'))
  }
]

// Element
function h(type: string, children?: RawChildren): VNode
function h(
  type: string,
  props?: RawProps | null,
  children?: RawChildren | RawSlots
): VNode

// Component
function h(type: Component, children?: RawChildren): VNode
function h<P>(
  type: Component<P>,
  props?: (RawProps & P) | null,
  children?: RawChildren | RawSlots
): VNode

import { h } from 'vue'

// Type only
h('div')

// Type + props
h('div', { id: 'foo', class: 'bar' })

// Type + children
h('div', [
  h('span', 'hello'),
  h('span', 'world')
])

// Type + props + children
h('div', { class: 'container' }, [
  h('h1', 'Title'),
  h('p', 'Content')
])

h('div', 'Hello World')

import { h } from 'vue'
import MyComponent from './MyComponent.vue'

// Component without props
h(MyComponent)

// Component with props
h(MyComponent, {
  message: 'Hello',
  count: 42
})

// Component with slots
h(MyComponent, null, {
  default: () => 'Default slot content',
  header: () => h('h1', 'Header')
})

h('button', {
  onClick: () => console.log('clicked'),
  onMouseover: (e) => console.log('hover')
}, 'Click me')

import { h, ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    
    return () => h('div', [
      h('h1', `Count: ${count.value}`),
      h('button', {
        onClick: () => count.value++
      }, 'Increment')
    ])
  }
}

import { h } from 'vue'
import Parent from './Parent.vue'
import Child from './Child.vue'

export default {
  render() {
    return h(Parent, null, {
      default: () => [
        h(Child, { msg: 'Child 1' }),
        h(Child, { msg: 'Child 2' })
      ]
    })
  }
}

import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    // h() is called automatically by JSX transform
    return () => <div class="container">Hello</div>
  }
})