Quasar banner

​
Prerequisites

Before you start, make sure you:

1

Install the libSQL SDK

Begin by installing the @libsql/client dependency in your project:

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

import { createClient } from "@libsql/client/web";

const turso = createClient({
  url: import.meta.env.VITE_TURSO_DATABASE_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

Todo App

See the full source code

Was this page helpful?

SvelteKitElysia