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



  • 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.



  • 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



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


  • Admin

    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.



  • @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



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



  • I was too looking for this



  • I am also looking for a tutorial about using Quasar (Vue/Electron) with SQLite, too. I want to develop a desktop application.


Log in to reply