Skip to content

Commit fe721c6

Browse files
committed
docs: migration
1 parent f854b67 commit fe721c6

File tree

1 file changed

+51
-2
lines changed

1 file changed

+51
-2
lines changed

docs/cookbook/migration-v2-v3.md

Lines changed: 51 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ Therefore, these are the requirements to upgrade to VueFire v3:
99

1010
## General recommendations
1111

12-
VueFire 3 introduces a Composition API that is more flexible and powerful than the Options API. It keeps the existing Options API as a wrapper around the Composition API but we recommend you to give the Composition API a try as it gives you more control over your data state.
12+
VueFire 3 introduces a Composition API that is more flexible and powerful than the Options API. However, it keeps the existing Options API as close as possible to the existing version in v2. Internally, it is implemented as a wrapper around the Composition API.
1313

1414
## Breaking changes
1515

@@ -20,9 +20,58 @@ Firestore supports a native equivalent of the `serialize` option: [Firestore Dat
2020
VueFire does support a **global `converter` option** that is equivalent to the previous global `serialize` option. Note that, like the its predecessor `serialize`, VueFire uses a default converter that adds the `id` property to your data, you can import it to use it:
2121

2222
```ts
23-
// TODO:
23+
import { firestorePlugin } from 'vuefire'
24+
import { createApp } from 'vue'
25+
26+
const app = createApp(App)
27+
app.use(firestorePlugin, {
28+
converter: {
29+
toFirestore() {
30+
// ...
31+
},
32+
fromFirestore() {
33+
// ...
34+
}
35+
}
36+
})
2437
```
2538

39+
If you were using it locally when calling `$bind()`, you should now use the `.withConverter()` method on your data source:
40+
41+
```ts
42+
const usersRef = collection(db, 'users').withConverter({
43+
// you can directly use the default converter
44+
toFirestore: firestoreDefaultConverter.toFirestore,
45+
fromFirestore: (snapshot, options) => {
46+
// or reuse it and extend it
47+
const data = firestoreDefaultConverter.fromFirestore(snapshot, options)
48+
return new User(data)
49+
}
50+
})
51+
```
52+
53+
Note you can even **reuse** the default converter to extend it:
54+
55+
```ts
56+
import { firestoreDefaultConverter } from 'vuefire'
57+
58+
const usersRef = collection(db, 'users').withConverter({
59+
// you can directly use the default converter
60+
toFirestore: firestoreDefaultConverter.toFirestore,
61+
fromFirestore: (snapshot, options) => {
62+
// or reuse it and extend it
63+
const data = firestoreDefaultConverter.fromFirestore(snapshot, options)
64+
return new User(data)
65+
}
66+
})
67+
```
68+
69+
### Rename `$bind` to `$firestoreBind`
70+
71+
The `$bind` method is now called `$firestoreBind` to avoid conflicts with other libraries. In the same way, `$unbind` is now called `$firestoreUnbind`.
72+
73+
The `$rtdbBind` and `$rtdbUnbind` methods are unchanged.
74+
2675
## Vuexfire
2776

2877
:::tip

0 commit comments

Comments
 (0)