Can't return a value from an Atlassian Forge resolver to a custom UI written in Vue

I have an Atlassian forge resolver

import Resolver from '@forge/resolver'

const resolver = new Resolver()

resolver.define('getIssueKey', ({context}) => {
    const jiraKey = context.extension.issue.key
    console.info(`Returning jira key ${jiraKey}`)
    return jiraKey
})

export const handler = resolver.getDefinitions()

I also have a Vue Custom UI which invokes the resolver

<script lang='ts'>
import { defineComponent } from 'vue'
import { invoke } from '@forge/bridge'    

export default defineComponent({
    mounted() {
        var jiraKey = 'Retrieving jira key' as any
        invoke('getIssueKey').then((data) => {
            console.info('Success')
            jiraKey = data
        }).catch(() => jiraKey = 'Error retrieving jira key')
    }
})

I know the resolver is invoked because I can see a console log “INFO 21:37:23.021 Returning jira key ESP-999” but the resolver does not appear to resolve, neither the “then” or “catch” portion of the promise are ever called. I see no further logs.

Have I made a coding error that I can’t see or must a custom UI in forge be written in React?

Hi @RodPienaar, thank you for reaching out!

As far as I know it is perfectly fine to use Vue in your Custom UI app.

Before further investigation, I would like to confirm that you are checking for logs in browser console. Have in mind that resolver logs, in your case INFO 21:37:23.021 Returning jira key ESP-999, should be visible via forge tunnel.
However, logs from the Custom UI will be visible in browser console.

Best regards,
Łukasz

2 Likes

Thank you Łukasz. Thats all I needed. The promise was resolving and I am retrieving the issue key. With a few revisions I found a really simple bug in my code and now it works.