# VueFire: Firebase bindings for Vue that keep Firestore in a ref

> VueFire wires Cloud Firestore and the Realtime Database into Vue's reactivity system, so a query result is a ref you can render directly. It suits Vue and Nuxt apps that already use Firebase and want the SDK's data flow without hand-written subscription code.

**vuejs/vuefire** — 🔥 Firebase bindings for Vue.js

- Repository: https://github.com/vuejs/vuefire
- Website: https://vuefire.vuejs.org
- Stars: 3,908 · Forks: 340
- Language: TypeScript
- License: MIT
- Published: 2026-09-23 · Updated: 2026-09-23 · Language: en
- Canonical page: https://hysenlabs.com/projects/vuejs-vuefire

## What VueFire actually binds, and who ends up using it

The README describes the project as "Firebase for Vue made easy" and lists the surfaces it covers: Vue >=2.7 and Vue 3, the Composition and Options APIs, Vuex, Pinia, and "anything that gives you a Vue ref()". The last item is the honest description of the scope. VueFire is not a Firebase client and not an abstraction over Firebase; it is a binding layer that turns Firebase's realtime listeners into Vue reactive state.

That shapes the audience. If your app already uses the modular Firebase SDK and your components currently hold a subscription, copy snapshots into a local ref, and tear the listener down in an unmount hook, VueFire removes that boilerplate. If your app does not use Firebase at all, there is nothing here for you. The package.json description goes further than the README and calls it "Official Firebase bindings for Vue.js", but the README's own framing is the narrower and more accurate one: it is about data binding, not about the whole Firebase product surface. Authentication, analytics, messaging and remote config are not what this package is for, and the README does not claim otherwise.

## How the reactivity bridge works

The mechanism is a subscription that writes into reactive state and is disposed with the component. The README states that VueFire is "Built for Modular Firebase >=9 for optimal tree shaking" and that it will "Automatically listen for changes in nested references". Those two statements explain most of the design.

Because it targets the modular SDK, the imports you use are Firebase's own tree-shakeable functions, and VueFire wraps them rather than re-exporting a bundled client. The package.json marks the package with "sideEffects": false, which is consistent with that goal: bundlers can drop unused entry points. The nested-reference behaviour matters for document data that points at other documents or collections. Rather than making you resolve each reference by hand and manage a second listener, the binding follows the reference and keeps the resolved value reactive.

The data flow is one-directional in the sense that matters: Firebase is the source of truth, the listener pushes updates, and Vue's reactivity propagates them to whatever consumes the ref. Vuex and Pinia support is a consequence of the same design, since both can hold refs. The trade-off is that you inherit Firebase's listener semantics, including the cost model of long-lived listeners and the fact that your component's lifecycle now determines when a subscription exists. The README does not discuss listener cost or quota behaviour, so budget planning is your responsibility, not something the project documents.

## Installing VueFire and reading a first document

The README gives one install command and points at the documentation for everything else. VueFire requires the firebase package alongside it:

```bash
npm install vuefire firebase
```

After that, the README sends you to the getting-started guide and to the Nuxt instructions, both on vuefire.vuejs.org. It also links three runnable examples: a Vite demo, a Nuxt demo on the Spark plan and a Nuxt demo on the Blaze plan. Those links are the practical starting point, because the README itself does not show a component.

For Nuxt the project ships a separate package, nuxt-vuefire, which had its own release on the same day as v3.2.3. The repository layout confirms the split: there is a packages/ directory and a playground/ directory, and the release list shows nuxt-vuefire@1.1.2 as a distinct tag.

Runtime requirements come from package.json rather than the README. The engines field declares node >=20, and the package is ESM-first ("type": "module") with dual exports for import and require, plus a ./server entry point for server-side use. If you are on Node 18, the metadata says you are outside the supported range.

## Where VueFire stops being the right tool

The clearest limitation is scope. VueFire binds database data. A Vue app that needs Firebase Authentication, Cloud Messaging or Analytics still uses Firebase directly for those, and VueFire does not change that work. Choosing it does not reduce the number of Firebase concepts you must learn; it reduces the amount of subscription bookkeeping you write.

The second limitation is coupling. Your component lifecycle now governs when listeners exist. That is convenient in a component tree and awkward outside one, for example in a background job or a server process that has no component to unmount. The package does expose a ./server entry point, but the README does not document what it does or how server-side reads behave, so anyone planning SSR data loading should read the documentation rather than infer from the export map.

The third is documentation depth in the README itself. There is no rollback guidance, no migration notes from earlier major versions, and no statement about listener quotas or offline behaviour. The README also does not document error handling for a failed listener. If your team needs those answers before adopting, they are not in the file you will land on first.

## VueFire against using the Firebase SDK directly

The real alternative is not another library; it is the Firebase Web SDK on its own. The README links the Firebase Web Docs, the Realtime Database docs and the Cloud Firestore docs under a Related heading, which is effectively the project telling you where the underlying behaviour is defined.

Using the SDK directly means you call the same modular functions VueFire wraps, and you manage the listener, the local state and the cleanup yourself. That gives you full control over exactly when a subscription starts and stops, which matters if you want to keep a listener alive across route changes or share one listener between several components. VueFire's value is that it makes the common case short; the cost is that the common case is the one it optimises for.

A second alternative is to keep Firebase out of the component layer entirely and put it behind a store you write yourself. VueFire supports Vuex and Pinia, so this is not an either-or decision, but a hand-written store gives you a place to put retry logic, caching and error states that the binding layer does not address. If your data layer needs those, write the store and use the SDK inside it.

## Maintenance, releases and licence

The repository is not archived. The last push was on 2026-04-15, and the most recent release, v3.2.3, was tagged the same day, with nuxt-vuefire@1.1.2 following minutes later. The previous release, v3.2.2, dates from 2025-07-20.

That pattern is worth reading carefully. Two release lines moving together on one day, then a gap of several months, suggests maintenance that responds to issues and dependency changes rather than a continuous feature cadence. The README's Status section says only that "VueFire and Nuxt VueFire are both currently stable", and points at a Roadmap issue for future plans. There is no published deprecation notice and no announced successor.

Upgrade cost is tied to Firebase itself. Because VueFire targets the modular SDK, a Firebase major version is the event most likely to force changes in your code, and the CHANGELOG.md at the repository root is where those changes are recorded. The licence is MIT, which permits commercial use and modification; the package.json declares the funding field pointing at GitHub Sponsors, so the project's sustainability model is donations rather than a paid tier. Nothing in the repository suggests a licence change or a commercial edition.

## Conclusion

Adopt VueFire if your Vue or Nuxt app already talks to Cloud Firestore or the Realtime Database and you want query results as refs instead of hand-rolled onSnapshot plumbing. Skip it if you only need Firebase Authentication, or if you need a database Firebase does not offer, because the library binds database and storage data, not the rest of the SDK. Before committing, check that your runtime satisfies the engines field of node >=20, confirm your Vue version against the stated support for Vue >=2.7 and Vue 3, and read the getting-started page for the API you plan to use, since the README itself shows only the install command.

## FAQ

### How do I install VueFire in a Vue project?

Install it together with Firebase using npm install vuefire firebase, as the README shows. The README then directs you to the getting-started guide on vuefire.vuejs.org for the actual setup, and to separate instructions for Nuxt.

### Does VueFire work with Nuxt?

Yes. The README links dedicated Nuxt instructions, and the project publishes a separate nuxt-vuefire package, whose 1.1.2 release was tagged on 2026-04-15. The README also links two Nuxt demos, one on the Spark plan and one on the Blaze plan.

### Which Vue versions does VueFire support?

The README states that it works with Vue >=2.7 and Vue 3, and that it supports both the Composition and Options APIs. It also lists support for Vuex, Pinia and anything that gives you a Vue ref().

### What Node version does VueFire require?

The package.json engines field declares node >=20, and the package is published as an ES module with separate import and require exports. The README does not restate this requirement.

### Is VueFire free to use?

Yes, it is released under the MIT licence, which is stated at the end of the README. The project asks for support through GitHub Sponsors and PayPal donations rather than through a paid edition.

## Sources

- [License: MIT](https://github.com/vuejs/vuefire/blob/main/LICENSE)
- [Project website](https://vuefire.vuejs.org)
- [README](https://github.com/vuejs/vuefire/blob/main/README.md)
- [Releases](https://github.com/vuejs/vuefire/releases)
- [vuejs/vuefire on GitHub](https://github.com/vuejs/vuefire)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/vuejs-vuefire