1.0.0-beta.9 โข Published 1 year ago
nuxt-flame v1.0.0-beta.9
๐ฅ Nuxt Flame
Easily integrate Google Firebase into your Nuxt 3 application
๐ฆพ Features
- โฐ ย Firebase Auth, Firestore, Realtime Database, Cloud Functions and Cloud Storage
- ๐งช ย Emulators support
- ย TypeScript support
- ๐ ย SSR Friendly
- ๐ ย Safe
- ๐ชถ ย Light
๐๏ธ Installation
- Add
nuxt-flame
dependency to your project
# Using pnpm
pnpm add -D nuxt-flame firebase firebase-admin
# Using yarn
yarn add --dev nuxt-flame firebase firebase-admin
# Using npm
npm install --save-dev nuxt-flame firebase firebase-admin
- Add
nuxt-flame
to themodules
section ofnuxt.config.ts
and specify Firebase credentials inruntimeConfig
export default defineNuxtConfig({
modules: [
"nuxt-flame"
],
runtimeConfig: {
firebaseAdminCredentials: {
projectId: process.env.FIREBASE_PROJECT_ID,
clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
privateKey: process.env.FIREBASE_PRIVATE_KEY,
},
public: {
firebaseCredentials: {
apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.FIREBASE_APP_ID,
measurementId: process.env.FIREBASE_MEASUREMENT_ID,
},
},
},
})
- Create
.env
file and put your credentials there
// Web credentials from code snippet provided by Google Firebase
FIREBASE_API_KEY=********
FIREBASE_AUTH_DOMAIN=********
FIREBASE_PROJECT_ID=********
FIREBASE_STORAGE_BUCKET=********
FIREBASE_MESSAGING_SENDER_ID=********
FIREBASE_APP_ID=********
FIREBASE_MEASUREMENT_ID=********
// Admin credentials from service account key (JSON)
FIREBASE_CLIENT_EMAIL=********
FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----
****************************************************
****************************************************
****************************************************
****************************************************
****************************************************
****************************************************
**************************
-----END PRIVATE KEY-----"
- (Optional) Feel free to configure Nuxt Flame in
nuxt.config.ts
export default defineNuxtConfig({
// ...
/**
* Default Nuxt Flame settings
*/
flame: {
authApiEndpoint: "/api/__session",
authCookieName: "__session",
emulators: {
enabled: false,
auth: {
enabled: false,
url: "http://127.0.0.1:9099",
options: {
disableWarnings: false,
},
},
firestore: {
enabled: false,
host: "127.0.0.1",
port: 8080,
},
database: {
enabled: false,
host: "127.0.0.1",
port: 9000,
},
functions: {
enabled: false,
host: "127.0.0.1",
port: 5001,
},
storage: {
enabled: false,
host: "127.0.0.1",
port: 9199,
},
},
},
// ...
})
That's it! You can now use Nuxt Flame in your Nuxt app โจ
Usage
Nuxt Flame exports bunch of Firebase helpers (Vue composables) that available both client and server side.
Firebase Apps
const app = useFirebaseApp() // client-side
const admin = useFirebaseAdminApp() // server-side
Firebase Auth
Basic usage:
// Firebase Auth instance (client only)
const auth = useAuth()
// Firebase Auth instance with admin credentials (server only)
const auth = useServerAuth()
// Get current user
// โ๏ธ Client returns `User` object when server returns `DecodedIdToken` object
const currentUser = useCurrentUser()
Authentication example using Google provider:
import { GoogleAuthProvider, signInWithPopup, signOut } from "@firebase/auth"
import { useAuth, useCurrentUser } from "#imports"
const auth = useAuth()
const currentUser = useCurrentUser()
const login = async () => {
if (!auth) return
await signInWithPopup(auth, new GoogleAuthProvider())
}
const logout = async () => {
if (!auth) return
await signOut(auth)
}
Firestore
Get Firebase Firestore instance:
const db = useFirestore()
Documents
// Get single document (SSR friendly)
const post = await useAsyncDocument("posts", "1")
// Get single document (async)
const { data, loading, error, refresh } = useDocument("posts", "1")
// Subscribe to document changes
const { data, loading, error, unsubscribe } = useDocumentSubscribe("posts", "1")
// Don't forget to unsubsribe
onUnmounted(() => unsubscribe())
Collections
// Get collection documents (SSR friendly)
const posts = await useAsyncCollection("posts")
// Get collection documents (async)
const { data, loading, error, refresh } = useCollection("posts")
// Subscribe to collection changes
const { data, loading, error, unsubscribe } = useCollectionSubscribe("posts")
// Don't forget to unsubsribe
onUnmounted(() => unsubscribe())
Collection Queries
import { where, orderBy } from "firebase/firestore"
// Get collection documents with query (SSR friendly)
const posts = await useAsyncCollection("posts", {
conditions: [
where("author", "==", "Andrew Kodkod"),
orderBy("createdAt", "desc"),
],
})
// Get collection documents with query (async)
const { data, loading, error, refresh } = useCollection("posts", {
conditions: [
where("author", "==", "Andrew Kodkod"),
orderBy("createdAt", "desc"),
],
})
Cloud Functions
Get Firebase Cloud Functions instance:
const functions = useFunctions()
Call https callable Cloud Function:
const archivePost = useFunction("archivePost")
const onArchive = async () => {
const result = await archivePost.performAsync({ postId: "1", reason: "Spam" })
}
Realtime Database
Get Firebase Realtime Database instance:
const db = useDatabase()
Cloud Storage
Get Firebase Cloud Storage instance:
const storage = useStorage()
Enable Emulators
// nuxt.config.ts
export default defineNuxtConfig({
// ...
flame: {
emulators: {
enabled: process.env.NODE_ENV !== "production",
}
}
// ...
})
๐ฃ๏ธ Roadmap
- Tests
- TypeScript examples
- Advanced usage examples
- Helpers for Firestore
- Helpers for Functions
- Helpers for Storage
- Helpers for Realtime Database
๐ฉโ๐ป Development
# Install dependencies
pnpm install
# Generate type stubs
pnpm run dev:prepare
# Develop with the playground
pnpm run dev
# Build the playground
pnpm run dev:build
# Run ESLint
pnpm run lint
# Run Vitest
pnpm run test
pnpm run test:watch
# Release new version
pnpm run release
1.0.0-beta.9
1 year ago
1.0.0-beta.8
1 year ago
1.0.0-beta.7
1 year ago
1.0.0-beta.6
1 year ago
1.0.0-beta.5
1 year ago
1.0.0-beta.4
1 year ago
1.0.0-beta.3
1 year ago
1.0.0-beta.2
1 year ago
1.0.0-beta.1
1 year ago