Quasar + Turso

Set up Turso in your Quasar project in minutes

Prerequisites

Before you start, make sure you:

• Install the Turso CLI
• Sign up or login to Turso
• Have a Quasar app — learn more

1. Install the libSQL SDK

   npm

   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

Todo App

See the full source code