How to import @ionic/storage in Ionic Vue?

Ionic Framework Ionic Vue
1

I would like to store some of my data but I can’t import it on ionic vue. I even tried to use vue session but I can’t use it in main.ts. Can anyone help me or share some wisdom?

2

it’s in the capacitor lib, from my app

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

@ionic/storage is an Angular only package, so it cannot be used in a Vue app.

But as @sdetweil has suggested, Capacitor’s Storage API can be used instead.

3 Likes
4

You could also use the localForage library directly. Except for SQLite support, it’s what @ionic/storage uses under the hood. It prefers IndexedDB over localStorage if it’s available, which has a much larger quota compared to localStorage.

However, do note that IndexedDB and localStorage are prone to get purged without warning by the OS, as mentioned here.

5

Currently I have this working as a mixin on Vue3

<script>
import { Storage } from "@ionic/storage";

export default {
  name: 'StorageService',
  data() {
    return {
      localStorage: new Storage()
    }
  },
  mounted() {
    this.localStorage.create();
  },
  methods: {
    async setLocalStorage(index, value) {
      await this.localStorage.set(index, value);
    },
    async getLocalStorage(index) {
      await this.localStorage.get(index);
    },
    async removeLocalStorage(index) {
      await this.localStorage.remove(index);
    },
    async clearLocalStorage() {
      await this.localStorage.clear();
    }
  }
};
</script>
6

Does this work to make data very persistent? That is, can I now dump SQLite?