SQLite for Ionic + Vue

Ionic Framework Ionic Vue
1

Hey guys,

is it possible to set up a SQLite database for an Ionic + Vue app? In the docs I found an example for Angular and React is mentioned, but not Vue.

Referring to this:
$ npm install cordova-sqlite-storage
$ npm install @awesome-cordova-plugins/sqlite
$ ionic cap sync

I was also considering capacitor-community/sqlite, but while installing I ran into some outdated dependencies which I thought was not a great sign. Also the docs for the Vue integration appear extremely complicated to me.

Thanks and cheers
sc0

2

I haven’t used SQLite, but I also found this capacitor plugin, with Vue instructions:

3

Thanks, yeah found em too! But the implementation looks pretty verbose and the docs are really hard to grasp:

Docs

On top of that I was having issues with outdated dependencies on install. I thought that wasn’t a great sign. Not sure how well it’s maintained?

4

what specific issues are you having? why are you not using the community plugin… yes the documentation is a bit overwhelming and hard to follow. I am working on some updated content to show how to use the community plugin.

5

Awesome, that’s great! I’ll walk you through my process, maybe this can be helpful when working on the docs!

First I was unsure if I shall go with the community plugin or with what’s mentioned in the official Ionic docs. I tried installing the community plugin and got errors with dependencies and concluded it’d probably be better to go with the official way of doing it.

As far as the errors, this was my fault. I didn’t realise Capacitor 5 had just come out (I’m using Ionic for the first time and just started trying it out 2 weeks ago).

I was basically switching back and forth between @awesome-cordova-plugins/sqlite and capacitor-community/sqlite. With the cordova route I got stuck because the docs didn’t include any info on how to use it in non-Angular environments.

Learning in the forum that the community plugin was the way to go, I decided to stick with it for the last couple days. But my app would always crash. Yesterday I had a breakthrough though!

// SQLite Hook definition
app.AppContext.config.globalProperties.$sqlite = useSQLite({
  onProgressImport,
  onProgressExport,
});

I found out that this was causing my app to crash. After changing it to…

// SQLite Hook definition
app._context.config.globalProperties.$sqlite = useSQLite({
  onProgressImport,
  onProgressExport,
});

the app did no longer crash and I was able to successfully run the test.

What almost made me give up was not knowing which package was the right choice, the issues I ran into, as well as the docs. What would have been great for me was if the docs started out with a bare minimum example of how to run an operation. Also the order of things (non-web, web, component, utils) and the naming (web can mean multiple things to a newbie like myself - are we talking about PWAs? Electron? I’m just learning what’s possible with Ionic) was a bit confusing for me personally.
Also I didn’t know (and still don’t) what onProgressImport/onProgressExport is and does and why I can decide to not use it. isModalOpen not being initialised was another thing.

It may very well be that I’m lacking some knowledge that caused the confusion. But it’s an honest account about what gave me a hard time and I hope this helps :slight_smile:

6

I just posted a video and source code on this specific topic which I why I asked

1 Like
7

Awesome thanks!

I’ve gotten much further already and created a Database class that handles initialization, opening and closing connections etc. Would you have any recommendations on where to store an object once created in order to use it in different components?

// App.vue
import { Database } from "@/utils/class";

// Create Database object
const app = getCurrentInstance();
const db = new Database(app, "MyDatabase");

It’d be great if it was possible to use it like so:

// Component.vue
db.init();
db.query(sql)

Instead of:

state.db.init();
state.db.query(sql)

Since I don’t need it to be reactive, I thought there might be a better way than using ref() or reactive(). I tried using provide(‘db’, db), but that causes errors during initialization.

8

So I am working on a more advanced class that I will add to Udemy, in that I will be creating a composable to store all of the SQLite related functionality, so you could go that direction or use pinia or view

9

cordova-sqlite-storage works well

10

doesnt seem like there is active development going on over there, that is why I went with the capacitor plugin

1 Like
11

Is there a particular reason why you decided to take the composable route? Are there any advantages as far as implementing reactivity etc?

12

Just a habit I suppose. What are your thoughts?

13

I was thinking about it for the last couple of days. Intuitively I’d conceptualize it as object that would be kept in a store and accessed from different components and views. I wrote a class with a constructor like so:

constructor(name: string, app: ComponentInternalInstance | null) {
    this.app = app;
    this.sqlite = this.app?.appContext.config.globalProperties.$sqlite;
    this.name = name;
    this.instance = null;
  }

… and a couple of methods like init(), createConnection(), destroyConnection, query(), run() etc.
I might change the latter two to create(), read(), update() and delete().

But I’m still curious as to what the adventages might be to using composables. Or if it just comes down to personal preference :slight_smile:

14

Just discovered that the community sqllite will no longer be further developed as the maintainer is retiring…