Quasar banner

Prerequisites

Before you start, make sure you:

1

Install the libSQL SDK

npm install @libsql/client
2

Configure database credentials

Get the database URL.

turso db show --url <database-name>

Get the database authentication token.

turso db tokens create <database-name>

Assign credentials to the environment variables inside .env.local.

VITE_TURSO_DATABASE_URL="..."
VITE_TURSO_AUTH_TOKEN="..."
3

Configure LibSQL Client

IndexPage.vue
import {createClient} from '@libsql/client/web';

const turso = createClient({
  url: import.meta.env.VITE_TURSO_URL,
  authToken: import.meta.env.VITE_TURSO_AUTH_TOKEN,
});
}

Avoid a gotcha moment by modifying the app configuration using the settings below.

quasar.config.js
{
  build: {
    target: {
      browser: [
        'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13.1'
      ],
      node: 'node16'
    },
    extendViteConf(config) {
      config.optimizeDeps = {
        esbuildOptions: {
          target: 'es2020',
        }
      }
    }
  }
}
4

Fetch data from Turso.

IndexPage.vue
import { ref } from "vue";

const items = ref();

const { rows } = await turso.execute("select * from my-table");

items.value = rows;

Examples