Vue with Thin

Learn how to add Thin Backend to your Vue application

1. Introduction

This guide covers how to use Thin as the Backend for your Vue application.

If you haven't already, start by generating a new Vue project. The vue scaffolding tool will prompt you whether to use TypeScript, it's recommended you enable TypeScript there.

npm init vue@latest
cd my-vue-project

npm install

Now you can start the Vue development server:

npm run dev

2. Install Packages

Install the thin-backend and thin-backend-vue packages:

npm install thin-backend thin-backend-vue

3. Init

Now that we have installed the Thin Backend packages, we need to call initThinBackend from the entrypoint of the Vue app to initalize Thin Backend.

Open the project's App.vue and add a call to initThinBackend like this:

<script setup lang="ts">
// Add these imports
import { initThinBackend } from 'thin-backend';
import { ThinBackend } from 'thin-backend-vue';

// Then call `initThinBackend`
initThinBackend({
    // This url is different for each backend, you can find the backend url in the project documentation
    host: 'https://<YOUR PROJECTS BACKEND_URL>'
});
</script>

<template>
    // Wrap your app with the <ThinBackend/> component
    <ThinBackend requireLogin>
        // ...
    </ThinBackend>
</template>

Now your react application is connected to your Thin Backend and you can now use Thin Backend for accessing your database and managing auth.

4. Installing Types (Optional)

Thin Backend generates TypeScript Type Definitions based on your database schema. This catches most runtime errors ahead of time, while providing really nice autocompletion in VSCode and other editors.

The custom Types can be installed into a project by installing a custom npm package. This npm package is specifically generated for your project and tagged with a secret url, so only you can access it.

To install your project's Types, open the Schema Designer. Click the Type Definitions tab. Now you see a npm install .. command:

Run this command locally in your project directory. After that the types will be automatically available in your project.

When you make changes to the database schema, a new type definition package will be generated. To use the latest types, open the Type Definitions tab again and install the latest package listed there.

5. Fetching Data

You can use the useQuery function to access your project's database. Let's say your building a todo list app and you've previously created a tasks table in the Schema Designer. The following code will show all tasks and a button to add new tasks.

Create a file components/Tasks.vue with this content:

<script setup lang="ts">
import { createRecord, query, updateRecord, type Task } from 'thin-backend';
import { useQuery } from 'thin-backend-vue';

const tasks = useQuery(query('tasks').orderBy('createdAt'));

function updateTask(task: Task) {
    updateRecord('tasks', task.id, { title: window.prompt('New title') || '' })
}

function addTask() {
    createRecord('tasks', {
        title: window.prompt('Title:') || ''
    });
}
</script>

<template>
    <div v-for="task in tasks" v-on:dblclick="updateTask(task)">
        {{task.title}}
    </div>

    <button v-on:click="addTask()">Add Task</button>
</template>

The useQuery(query('tasks').orderBy('createdAt')) call, sets up a reactive realtime subscription behind the scences. Whenever the result set of our query('todos').orderBy('createdAt') we fired here changes, it will trigger a re-render of our component.

The createRecord('tasks', { .. }) call insert something into the tasks table.

We also need to call the new components/Tasks.vue from our App.vue. Change the App.vue to this:

import Tasks from './components/Tasks.vue'

<template>
    <ThinBackend>
        <Tasks />
    </ThinBackend>
</template>

Check out the Database Guide for a full list of all database operations you can do with Thin.

Next: Database Guide →