0.10.1 • Published 2 years ago
thin-backend-vue v0.10.1
Thin + Vue
Install
Inside your vue project:
npm install thin-backend thin-backend-vue
Usage
Inside your
App.vue
add the following:<script setup lang="ts"> // ... import { initThinBackend, ThinBackend } from 'thin-backend'; initThinBackend({ // Replace this with your project host: host: 'https://testus.thinbackend.app' }); </script> <template> // Wrap your app with the <ThinBackend/> component <ThinBackend requireLogin> // ... </ThinBackend> </template>
Now you can use Thin functions like
useQuery
orcreateRecord
from within your Vue app:<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>