Build a Web App with Nuxt 3 and Turso: Project Configuration

Introduction

Nuxt 3 is a powerful framework for building 'full stack' web applications. It uses Vue 3, and it is designed to be fast and easy to use. Nuxt also makes some important project structure decisions for you, so you don't have to. In this tutorial, we will learn how to build a web application using Nuxt 3 and Turso.

Turso is an edge-hosted, distributed database based on libSQL, an open-source fork of SQLite.

Prerequisites

Before we begin, make sure you have the following installed on your machine:

• Node.js
• NPM, pnpm or Yarn
• Git
• A code editor of your choice
• If you haven't created a Turso account, you can sign up for free here.

Getting Started

To get started, let's create a new project using the Nuxt CLI:

pnpm dlx nuxi init my-app

This will create a new project in the my-app directory. Next, let's install libsql, the client library we'll be using for Turso:

cd my-app
pnpm add @libsql/client

Next, lets create a .env file in the root of our project, this is where we'll store our Turso connection details:

touch .env

Now, open the .env file in your code editor and add the following:

TURSO_AUTH_TOKEN=
TURSO_URL=

Next, we'll download and install the Turso CLI:

curl -sSfL https://get.tur.so/install.sh | bash

Now lets authenticate with Turso:

turso auth login

And create a database:

turso db create my-app
⣽  Creating database my-app in group default...

Next, we'll grab the connection details for our database:

turso db list
my-app           libsql://my-app.turso.io

Copy the libsql url string and paste it into your TURSO_URL environment variable in your .env file.

Next, we'll create an auth token for our database:

turso db tokens create my-app

Copy the token and paste it into your TURSO_AUTH_TOKEN environment variable in your .env file.

Finally, lets add the environment variables to our Nuxt runtime config:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  telemetry: false,
  runtimeConfig: {
    turso: {
      url: process.env.TURSO_URL,
      authToken: process.env.TURSO_AUTH_TOKEN,
    },
  },
})

Now we are ready to start building our application! Join us in the next article to learn how to query our database using libsql and display the results in our application.