Display variable from async function in Ionic Template

I’m trying to display a result from an async method in the Vue/Ionic Template. I successfully retrieve the value from the local storage and output it using console.log

 setup() {

 import {Plugins} from "@capacitor/core";
 const {Storage}=Plugins;

 const getEmail= async()=>{
          const emailv=await Storage.get({key: "email"});
          return emailv.value;


I also tried this

 setup() {

  import {Plugins} from "@capacitor/core";
  const {Storage}=Plugins;

   const emailv= async()=>{
          const {value}=await Storage.get({key: "email"});
          return value;

And that’s how I call it on my template:


The problem is that, although it’s being successfully displayed on the console, it doesn’t seem to work on the template. It just shows me "[object Promise]" . I have tried looking for some solutions and, from what I understood (please correct me if I’m wrong as I’m not sure how async-await works.), once I retrieve the variable, I should be able to use it everywhere.

So my question is:

Is there any way for me to “get” this variable and display it in the template? I dont get any error, “Property “emailv” was accessed during render but is not defined on instance.”

I think it would be better to use a ref for this instead. In your setup method in your Vue component, you can declare the ref:

import { ref } from 'vue';


setup() {
  const email = ref('');


  const getEmail = async () => {
    const { value } = await Storage.get({ key: "email" });
    email.value = value;


  return { email }

And then render it in the template by doing {{ email }}.

1 Like

Thank you but still doesn’t work. It seems like a problem with async functions.


Actually I’m able to output everything in the console. I would like to find a way to print these values on templates/tags. They don’t seem to work. It either gives me empty results, or “[object Promise]” or App.vue?3dfd:10 Uncaught (in promise) TypeError: Cannot read property 'email' of undefined. It seems like the app can’t, shomehow, see the variable/const.

Can you provide a GitHub repo that shows this issue happening?

1 Like

Read me: GitHub - tguimmaraess/test-ionic

Master (actual files): GitHub - tguimmaraess/test-ionic at master

I created a new project to try to reproduce the issue.

I used a const to store the email and password.

Please, could you see what I am doing wrong? I’m very much appreciated.


I actually tried your solution again and it worked partially. I displays the email on the template but I get this error:

Type 'string | null' is not assignable to type 'string'. Type 'null' is not assignable to type 'string'.

It seems like the value const is empty but it has the email.


I managed to get it working by doing this:

  import { ref } from 'vue';
   . . .
  const email=ref("");

 . . .

  const getItem=async()=>{
      const {value}=await Storage.get({ key: 'email' });
      //succesfully displays "test@gmail.com" on the console.
      console.log('Got item: ', value);


return {getItem}

and in the Template:


But worked only the first time I accessed the page after login. If I try to access the page again it doesn’t show anything and gives me an error:

Uncaught (in promise) SyntaxError: Unexpected end of JSON input

If i remove {{JSON.parse(email)}} and leave just {{email}} it works but shows the email with “”.

you were close, i made a few changes and provide a link to additional resources


    const email = ref<any>(""); // OR const email = ref<string|null>("");

    onMounted(async () => {
      const { value } = await Storage.get({ key: "email" });
      email.value = value;

update template
<ion-note>{{ email }}</ion-note>

I have a bunch of ionic vuejs content here , most with source code


Thank you, Aaron. I watch your videos by the way. I would like to thank you for your helpful tutorials.