Quasar + Turso

Prerequisites

Before you start, make sure you:

Install the libSQL SDK

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

npm install @libsql/client

pnpm install @libsql/client

yarn add @libsql/client

deno add npm:@libsql/client

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="..."

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',
        }
      }
    }
  }
}

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

SvelteKit Elysia

​Prerequisites

​Examples

Todo App

Prerequisites

Examples