Skip to content

Commit d82508a

Browse files
committed
chore: update readme, add computed example
1 parent f292611 commit d82508a

File tree

1 file changed

+40
-3
lines changed

1 file changed

+40
-3
lines changed

Diff for: README.md

+40-3
Original file line numberDiff line numberDiff line change
@@ -88,12 +88,33 @@ import { useMeta, useActiveMeta } from 'vue-meta'
8888

8989
export default {
9090
setup () {
91-
// add meta info. The object passed into useMeta is configurable
91+
const counter = ref(0)
92+
93+
// Add meta info
94+
// The object passed into useMeta is user configurable
9295
const { meta } = useMeta({
93-
title: 'My Title'
96+
title: 'My Title',
97+
})
98+
99+
watchEffect(() => {
100+
const counterValue = counter.value
101+
meta.description = `Counted ${counterValue} times`
94102
})
95103

96-
// get the currently used metainfo
104+
// Or use a computed prop
105+
const computedMeta = computed(() => ({
106+
title: 'My Title',
107+
description : `Counted ${counter.value} times`
108+
}))
109+
110+
const { meta, onRemoved } = useMeta(computedMeta)
111+
112+
onRemoved(() => {
113+
// Do something as soon as this metadata is removed,
114+
// eg because the component instance was destroyed
115+
})
116+
117+
// Get the currently used metainfo
97118
const metadata = useActiveMeta()
98119

99120
watch(metadata, (newValue) => {
@@ -103,6 +124,22 @@ export default {
103124
}
104125
```
105126

127+
The useApi can also be used outside of a setup function, but then
128+
you need to get a reference to the metaManager somehow
129+
130+
```js
131+
const { unmount } = useMeta(
132+
{
133+
og: {
134+
something: 'test'
135+
}
136+
},
137+
metaManager
138+
)
139+
140+
unmount() // Remove metadata when needed
141+
```
142+
106143
### SSR
107144

108145
```js

0 commit comments

Comments
 (0)