Skip to content

fayazara/pocketbase-nuxt

Repository files navigation

Pocketbase Nuxt

npm version npm downloads License Nuxt

A Nuxt module that provides seamless integration with PocketBase, offering composables for authentication, real-time data, and simplified API interactions.

Features

  • 🔥 Full TypeScript Support
  • 🔒 Authentication Utilities
    • Email/Password authentication
    • OAuth providers support
    • Auto-refresh tokens
    • Persistent auth state
  • 🎯 Simple Setup - Just install and configure
  • ⚡️ Composables - Intuitive composables for PocketBase operations
  • 🛠 Dev Tools Integration - Access PocketBase Admin directly from Nuxt DevTools
  • 📦 Zero Configuration - Works out of the box with sensible defaults

Quick Setup

  1. Install the module:
# npm
npm install pocketbase-nuxt

# yarn
yarn add pocketbase-nuxt

# pnpm
pnpm add pocketbase-nuxt
  1. Add the module to your nuxt.config.ts:
export default defineNuxtConfig({
  modules: ['pocketbase-nuxt'],
  pocketbase: {
    url: 'http://127.0.0.1:8090' // Your PocketBase URL
  }
})

Usage

Authentication

<script setup lang="ts">
const { user, login, signup, signOut } = usePocketbaseAuth()

// Login
await login({
  email: '[email protected]',
  password: 'password123'
})

// Sign up
await signup({
  email: '[email protected]',
  password: 'password123',
  passwordConfirm: 'password123',
  name: 'New User'
})

// OAuth Authentication
await handleOAuth('google', {
  redirectPath: '/dashboard',
  onSuccess: () => {
    // Handle successful authentication
  }
})
</script>

<template>
  <div>
    <div v-if="user">
      Welcome, {{ user.name }}!
      <button @click="signOut">Sign Out</button>
    </div>
  </div>
</template>

Direct PocketBase Access

<script setup lang="ts">
const { pb } = usePocketbase()

// Use any PocketBase client method
const records = await pb.collection('posts').getList(1, 20)
</script>

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

License

MIT License