Nuxt/test/fixtures/bridge/pages/legacy-capi.vue

<template>
  <table>
    <tbody>
      <!-- Basic setup function -->
      <tr><td><b>setup</b></td><td> {{ setup }}</td></tr>
      <!-- Ref -->
      <tr>
        <td>
          <b>ref</b>
        </td>
        <td>
          {{ ref }}
        </td>
        <td>
          <button @click="ref = '❇️'">
            update
          </button>
        </td>
      </tr>
      <!-- Lifecycle methods -->
      <tr><td><b>onMounted</b></td><td> {{ mounted }}</td></tr>
      <!-- Wrappers -->
      <tr><td><b>useStore</b></td><td> {{ store.state.test }}</td></tr>
      <tr><td><b>useRoute</b></td><td> {{ route.path === '/legacy' ? '✅' : '❌' }}</td></tr>
      <tr><td><b>useContext</b></td><td> {{ Object.keys(context).length ? '✅' : '❌' }}</td></tr>
      <!-- Helpers -->
      <tr><td><b>useAsync</b></td><td> {{ async }}</td></tr>
      <tr><td><b>ssrRef</b></td><td> {{ ssrRef }}</td></tr>
      <tr><td><b>shallowSsrRef</b></td><td> {{ shallow }}</td></tr>
      <tr><td><b>ssrPromise</b></td><td> {{ promise }}</td></tr>
      <tr>
        <td><b>useMeta</b></td><td> {{ title }}</td>
        <td>
          <button @click="title = '❇️'">
            update
          </button>
        </td>
      </tr>
      <tr><td><b>onGlobalSetup</b></td><td> {{ globalsetup }}</td></tr>
      <FetchTest />
      <tr><td><b>reqSsrRef</b></td><td> {{ '⛔️' }}</td></tr>
      <tr><td><b>reqRef</b></td><td> {{ '⛔️' }}</td></tr>
    </tbody>
  </table>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, useRoute, useContext, useStore, useAsync, ssrRef, shallowSsrRef, ssrPromise, useMeta } from '@nuxtjs/composition-api'

export default defineComponent({
  setup () {
    const mounted = ref()
    const shallow = shallowSsrRef('❌')
    const { isHMR, $globalsetup } = useContext()
    const { title } = useMeta()
    if (process.server || isHMR) {
      shallow.value = '✅'
      title.value = '❌'
    }
    const promise = ref(null)
    ssrPromise(() => new Promise(resolve => setTimeout(() => resolve(process.server || isHMR ? '✅' : '❌'), 100))).then((r) => {
      promise.value = r
    })
    onMounted(() => {
      mounted.value = '✅'
      title.value = '✅'
    })
    const store = useStore()
    const route = useRoute()

    return {
      setup: '✅',
      ref: ref('✅'),
      mounted,
      store,
      route,
      context: useContext(),
      async: useAsync(() => new Promise(resolve => setTimeout(() => resolve(process.server || isHMR ? '✅' : '❌'), 100))),
      ssrRef: ssrRef(() => process.server || isHMR ? '✅' : '❌'),
      shallow,
      promise,
      title,
      globalsetup: $globalsetup
    }
  },
  head: {}
})
</script>