how to use sqlite in vue.js + tauri.js desktop app?

Question

so my projects structure is the same as in vue project but also see a src-tauri folder in the root. i am little but confused in this structure and its dependencies because it seems like project in project.

so i created a services folder in src of my vue project and in database.js built a connection and configured some test query. and then i used it in my component :

import sqlite3 from 'sqlite3';// Create a database connection
const db = new sqlite3.Database('sqlite3.db', (err) => {
  if (err) {
    console.error('Database connection error:', err.message);
  }
  console.log('Connected to the SQLite database.');
});

// Example function to perform a query
function getUsers(callback) {
  db.all('SELECT * FROM barbers', (err, rows) => {
    if (err) {
      console.error('Error querying users:', err.message);
      return callback(err);
    }
    callback(null, rows);
  });
}

export default {getUsers}

// vue component 
<template>
    <h1>Base Test</h1>
</template>

<script>
    import getUsers  from '../services/database.js';

    export default {
    name: 'data',
    data() {
        return {
            users: []
        };
    },
    mounted() {
        getUsers((err, users) => {
        if (err) {
            console.error('Error getting users:', err);
            return;
        }
        this.users = users;
        console.log(this.users)
        });
    }
    };

</script>

but i got the following error after tauri js app start, please help !!!enter image description here

i tried a lot of different ways but the error persists , maybe i should use some browser compatible modules like sql.js instead ?

Answer 1

The code you're executing is running the node version. Tauri does not support node anywhere, but it does support the browser environment.

Instead use tauri-plugin-sql

Run cargo add tauri-plugin-sql -F sqlite

Then add npm package via npm add @tauri-apps/plugin-sql

In your rust code, call the builder like this:

  .plugin(tauri_plugin_sql::Builder::default().build())

And finally execute your sql query:

import Database from "@tauri-apps/plugin-sql";
const db = await Database.load("sqlite:test.db");
const response = await db.execute("'SELECT * FROM barbers");

And remember to place your test.db inside of tauri::api::path::BaseDirectory::App folder.