Search code examples
sqlitevue.jsionic-frameworkionic4ionic-native

Install SQlite for Ionic4 Vue

I'm trying to add SQlite to my ionic4 project, but get installation errors.

My NPM install was this:

    ionic cordova plugin add cordova-sqlite-storage
    npm install @ionic-native/sqlite

    //ionic plugin add cordova-sqlite-storage ==> this one makes error

In main.js, I tried each of the following:

    import SQLite from 'ionic-native';
    import {SQLite} from 'ionic-native';
    import SQLite from '@ionic-native/sqlite';
    import {SQLite} from '@ionic-native/sqlite';
    import { SQLite, SQLiteObject } from '@ionic-native/sqlite';

Here are the errors: a) npm warning, b) console error, and c) Chrome inspector for main.js ionic native sqlite webpack is not constructor

And here's the code from main.js (last line is where everything fails).

    new Vue({
      el: '#app',
      router,
      template: '<App/>',
      components: { App },
      render : (h) => h(App),
      mounted() {

        this.storage = new SQLite();

*** I marked this question as answered, but there appears to be no answer yet. I'll keep working on it.

Solution

  • @ionic/vue is still in beta and the team is working on integrating it with the Vue CLI. They are also using Capacitor, not Cordova, as the official native bridge for this project. As such it is recommended to use Capacitor if at all possible. Should you go that route, their storage API is available in lieu of SQLite.

    If you would like to persist with your Cordova project, the Ionic Storage abstraction won't be available so you would have to bypass Ionic altogether.

    Install the plugin using the Cordova CLI (@ionic-native/sqlite is not required):

    cordova plugin add cordova-sqlite-storage

    Use the plugin directly e.g.

    const db = window.sqlitePlugin.openDatabase({...})

    db.executeSql('INSERT...', [...values], callbackFn, errorFn)