Backend Integration

Vue.js + PocketBase

Build full-stack applications with an open-source backend, SQLite database, and built-in authentication.

🚀 What is PocketBase?

PocketBase is an open-source backend solution with SQLite as its database, built-in authentication, and a RESTful API. It's designed to be easy to use and deploy, making it perfect for small to medium-sized projects.

🗄️

SQLite Database

Lightweight, file-based, no separate server needed

🔐

Built-in Auth

Email/password, OAuth, and token management out of the box

🌐

RESTful API

Auto-generated endpoints for all your collections

📦

Easy Deploy

Single executable file — just upload and run

Why use a backend? With PocketBase, you don't need to set up servers, databases, or authentication from scratch. Focus on building your app, not infrastructure.

⚙️ Installation & Setup

PocketBase is incredibly simple to set up — no complex configuration required.

Terminal — Start PocketBase Server

# Download PocketBase from pocketbase.io
# Extract and navigate to the folder
cd pocketbase_folder

# Start the server
./pocketbase serve

# Server runs at:
# → http://127.0.0.1:8090
# → Admin UI: http://127.0.0.1:8090/_/

Connection Simulator

○ Disconnected

Install PocketBase SDK in Vue Project

# In your Vue project folder:
cd my-vue-project

# Install PocketBase SDK
npm install pocketbase

# Or with yarn:
yarn add pocketbase

📁 Understanding Collections

PocketBase uses collections to organize data — similar to tables in traditional databases. Each collection stores related records, and each record is like a row with a unique ID.

Collection: posts

id	title	description	actions
1...	Getting Started with PocketBase	Learn the basics of this powerful backend solution.
2...	Building APIs with SQLite	PocketBase uses SQLite for fast, reliable data storage.

Record structure: Every record automatically includes id,created, updated,collectionId, and collectionName.

🔧 Integrating with Vue.js

Import PocketBase and set up reactive state to connect your Vue app to the backend.

Import Statements

<script setup>
import { ref, onMounted } from 'vue'
import PocketBase from 'pocketbase'

// Create PocketBase instance
const pb = new PocketBase('http://127.0.0.1:8090')

// Reactive state
const titleVal = ref('')
const descVal = ref('')
const posts = ref([])
</script>

Reactive State with ref()

// Form inputs
const titleVal = ref('')
const descVal = ref('')

// Data storage
const posts = ref([])

// These reactive variables automatically update the UI when changed

Vue Template Bindings

<!-- Two-way binding with v-model -->
<input v-model="titleVal" placeholder="Title">
<input v-model="descVal" placeholder="Description">

<!-- Event handling with @click -->
<button @click="add">Add Post</button>

<!-- List rendering with v-for -->
<ul>
  <li v-for="post in posts" :key="post.id">
    <h3>{{ post.title }}</h3>
    <p>{{ post.description }}</p>
  </li>
</ul>

⚡ CRUD Operations Demo

Learn how to Create, Read, Update, and Delete records with PocketBase.

Live Demo — Create Post

Title

Description

Create Record

add() Function

async function add() {
  const data = {
    title: titleVal.value,
    description: descVal.value
  }
  
  // Create record in 'posts' collection
  const record = await pb.collection('posts').create(data)
  
  // Add to local state
  posts.value.push(record)
  
  // Clear inputs
  titleVal.value = ''
  descVal.value = ''
}

Fetch Records

onMounted Hook

onMounted(async () => {
  // Fetch all records from 'posts' collection
  const _posts = await pb.collection('posts').getFullList()
  
  // Populate local state using spread operator
  posts.value.push(..._posts)
})

Async/Await: PocketBase methods return Promises. Use async/awaitfor clean, readable code. Always handle errors in production with try/catch blocks.

💻 Complete Vue Component

Here's the full code combining everything we've learned. Copy, paste, and run!

PostList.vue — Complete Example

<script setup>
import { ref, onMounted } from 'vue'
import PocketBase from 'pocketbase'

const pb = new PocketBase('http://127.0.0.1:8090')

const titleVal = ref('')
const descVal = ref('')
const posts = ref([])

async function add() {
  const data = {
    title: titleVal.value,
    description: descVal.value
  }
  const record = await pb.collection('posts').create(data)
  posts.value.push(record)
  titleVal.value = ''
  descVal.value = ''
}

onMounted(async () => {
  const _posts = await pb.collection('posts').getFullList()
  posts.value.push(..._posts)
})
</script>

<template>
  <input v-model="titleVal" placeholder="Title"><br>
  <input v-model="descVal" placeholder="Description"><br>
  <button @click="add">Add Post</button>

  <ul>
    <li v-for="post in posts" :key="post.id">
      <h3>{{ post.title }}</h3>
      <p>{{ post.description }}</p>
    </li>
  </ul>
</template>

🚀 Run Your App

1.Start PocketBase: ./pocketbase serve
2.Create "posts" collection with title and description fields
3.Install SDK: npm install pocketbase
4.Run Vue app: npm run serve or npm run dev

Pro Tip: Use Vue DevTools to inspect reactive state and debug your PocketBase integration. The posts array will show real-time updates as you add/delete records.

📚 Resources

PocketBase Official Site

pocketbase.io

PocketBase Documentation