Can anyone here have a tutorial how to create quasar framework with sqlite3 CRUD ?

Stephen

I’m creating a application that have a Sqlite , I can’t find any link that related to my needs. can anyone here give me a link.

s.molinari

sqlite is a database. You can’t use Quasar with it directly, since Quasar is a frontend framework. You’d need an API in front of the database.

Or am I misunderstanding your question?

Scott

Hawkeye64

You can use sqlite for mobile PWA apps? I think @Allan-EN-GB prefers to use PouchDB.

Allan-EN-GB

I use both. I prefer SQL actually but use pouch when required.

Are you using building for mobile or for web? SQLite for browser isn’t a thing - It’s something you’d use in mobile mode and there is a plugin you can use for it.

Let me know and I can provide some sample code.

fedee13

@Allan-EN-GB Would you mind sharing a sample code? I’m trying to develop a mobile app with Quasar+Cordova but I don’t know where to initialize cordova-sqlite-storage.
In a previous app I made what I did was before creating the Vue instance in main.js I initialize my database (WebSQL for browser and SQLite for native with cordova-sqlite-storage), should I do the same but with a db.js file inside /boot?

const DB_NAME = "DemoQuasar.db";
let myDatabase = null;

function openConnection() {
  return new Promise((resolve, reject) => {
    try {
      if (window.cordova.platformId === "browser") {
        myDatabase = window.openDatabase(
          DB_NAME,
          "1.0",
          "database",
          2 * 1024 * 1024
        );
        resolve();
      } else {
        window.sqlitePlugin.openDatabase(
          {
            name: DB_NAME,
            location: "default"
          },
          function(db) {
            myDatabase = db;
            resolve();
          }
        );
      }
    } catch (error) {
      reject(error);
    }
  });
}

function initializeDatabase() {
  return new Promise((resolve, reject) => {
    try {
      openConnection().then(() => {
        myDatabase.transaction(
          function(tx) {
            tx.executeSql(
              "CREATE TABLE IF NOT EXISTS Demo\
              (\
                Campo1 TEXT NOT NULL,\
                Campo2 TEXT NOT NULL,\
                Campo3 TEXT NULL\
              )"
            );
          },
          error => {
            // eslint-disable-next-line no-console
            console.log("Transaction ERROR: " + error.message);
            throw new Error(error.message);
          },
          function() {
            // eslint-disable-next-line no-console
            console.log("Initialize OK");
            resolve();
          }
        );
      }),
        error => {
          throw new Error(
            "Hubo un problem al inicializar la base de datos: " +
              JSON.stringify(error)
          );
        };
    } catch (error) {
      reject(error);
    }
  });
}

// eslint-disable-next-line no-unused-vars
export default async ({ app, router, store, Vue }) => {
  await initializeDatabase();
};

export { myDatabase };

And then in Index.vue (just to check if is it working or not):

<script>
import { myDatabase } from "../boot/db";
export default {
  name: "PageIndex",
  mounted() {
    myDatabase.transaction(
      function(tx) {
        tx.executeSql(
          "INSERT INTO Demo VALUES (?1,?2,?3)",
          ["Codigo1", "Codigo2", "Codigo3"],
          function(tx, res) {
            alert(res.insertId);
          }
        );
      },
      function(error) {
        alert(error);
      },
      function() {
        // eslint-disable-next-line no-console
        console.log("insert Demo OK");
      }
    );
  }
};
</script>

edit: example code

omgwalt

@Allan-EN-GB I would be very interested in seeing your sample code, Allan!