fix: Error: use getRouteBaseName function from setup root context inside computed on server side

🐛 The bug What isn’t working? Describe what the bug is.

On reload (server side): When you use the getRouteBaseName function from the setup root context inside a computed, an error is render : Cannot read property 'req' of undefined

By the way: $route from setup root context is not reactive. On update, watch and computed are not triggered

🛠️ To reproduce Steps to reproduce the behavior:

<template>
  <div>
    {{ routeBaseName }}
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, useRoute } from '@nuxtjs/composition-api'

export default defineComponent({
    name: 'MyAccount',
    setup(_, { root: { getRouteBaseName } }) {
      const route = useRoute()

      const routeBaseName = computed(() => {
        return getRouteBaseName(route.value)
      })

      return {
        routeBaseName,
      }
    }
  })
</script>

🌈 Expected behaviour No error with request parameters, there is no need 😃

Informations

• nuxt: 2.15.3
• @nuxtjs/composition-api: ^0.22.1
• Typescript

[rchl]

I’d suggest:

import { useContext } from "@nuxtjs/composition-api";

export default defineComponent({
  setup(_) {
    const { getRouteBaseName } = useContext();
// ...

Also, you need to add nuxt-i18n to types array in tsconfig.json.

EDIT: In the end the goal is to provide a proper composition API but this should work for now, for this API at least.

[danielroe]

@LouisMazel That’s likely something that can be addressed in the i18n module (which probably and understandably never foresaw access in this way). I’ll have a look.

cc @rchl