본문 바로가기
WIKI 기술 지식 베이스

Quasar + Turso

원문 보기 위키 갱신

Quasar 프로젝트에 Turso를 몇 분 만에 세팅하는 방법이에요. SDK 설치부터 자격 증명 설정, 클라이언트 구성, 데이터 조회까지 순서대로 따라오세요.

출처: 문서

본문

Prerequisites

시작하기 전에 다음을 확인하세요:

Install the libSQL SDK

@libsql/client 패키지를 설치하면 돼요: npm install @libsql/client

Configure database credentials

데이터베이스 URL을 받으세요:

turso db show --url <database-name>

데이터베이스 인증 토큰을 받으세요:

turso db tokens create <database-name>

그다음 .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,
});

참고로, 아래 설정으로 앱 설정을 수정하면 곤란한 상황을 피할 수 있어요.

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

Fetch data from Turso.

import { ref } from "vue";

const items = ref();

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

items.value = rows;

Examples

Todo App — 전체 소스 코드를 확인할 수 있어요.

더 알아보기 (Learn more)