Nuxt: Import a js depending on i18n

Question

I am currently importing a js file and processing it right with the folowwing asyncdata

async asyncData({ route, error }) {
    try {
      const entry = await import(
        `~/assets/data/portafolio/${route.params.work}.js`)
      return { entry: entry.default || entry }
    } catch (error_) {
      error({
        message: 'Not Found',
        statusCode: 404,
      })
    }
    return {}
  },

But when I try to add a language identifier to load the right file, that doesnt work.

async asyncData({ route, error }) {
    try {
      const entry = await import(
        `~/assets/data/${this.i18n.locale}/portafolio/${route.params.work}.js`)
      return { entry: entry.default || entry }
    } catch (error_) {
      error({
        message: 'Not Found',
        statusCode: 404,
      })
    }
    return {}
  },

Of course the path and files exists but I am getting an error with: http://localhost:3000/[object%20Object],[object%20Object],[object%20Object],[object%20Object],[object%20Object],[object%20Object] 404 (Not Found)

Any ideas on whats going wrong?

Thank you in advance!

Answer 1

I have found a solutiond and it is simple.

I was missing to add the app and then using it inside asuncData (on that context this. doesnt do anything)

async asyncData({ route, app, error }) {
    try {
      const entry = await import(
        `~/assets/data/${app.i18n.locale}/portafolio/${route.params.work}.js`)
      return { entry: entry.default || entry }
    } catch (error_) {
      error({
        message: 'Not Found',
        statusCode: 404,
      })
    }
    return {}
  },