mirror of
https://github.com/tenrok/vue-meta.git
synced 2026-06-24 00:40:35 +03:00
chore: update readme, add computed example
This commit is contained in:
@@ -88,12 +88,33 @@ import { useMeta, useActiveMeta } from 'vue-meta'
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
setup () {
|
setup () {
|
||||||
// add meta info. The object passed into useMeta is configurable
|
const counter = ref(0)
|
||||||
|
|
||||||
|
// Add meta info
|
||||||
|
// The object passed into useMeta is user configurable
|
||||||
const { meta } = useMeta({
|
const { meta } = useMeta({
|
||||||
title: 'My Title'
|
title: 'My Title',
|
||||||
})
|
})
|
||||||
|
|
||||||
// get the currently used metainfo
|
watchEffect(() => {
|
||||||
|
const counterValue = counter.value
|
||||||
|
meta.description = `Counted ${counterValue} times`
|
||||||
|
})
|
||||||
|
|
||||||
|
// Or use a computed prop
|
||||||
|
const computedMeta = computed(() => ({
|
||||||
|
title: 'My Title',
|
||||||
|
description : `Counted ${counter.value} times`
|
||||||
|
}))
|
||||||
|
|
||||||
|
const { meta, onRemoved } = useMeta(computedMeta)
|
||||||
|
|
||||||
|
onRemoved(() => {
|
||||||
|
// Do something as soon as this metadata is removed,
|
||||||
|
// eg because the component instance was destroyed
|
||||||
|
})
|
||||||
|
|
||||||
|
// Get the currently used metainfo
|
||||||
const metadata = useActiveMeta()
|
const metadata = useActiveMeta()
|
||||||
|
|
||||||
watch(metadata, (newValue) => {
|
watch(metadata, (newValue) => {
|
||||||
@@ -103,6 +124,22 @@ export default {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
The useApi can also be used outside of a setup function, but then
|
||||||
|
you need to get a reference to the metaManager somehow
|
||||||
|
|
||||||
|
```js
|
||||||
|
const { unmount } = useMeta(
|
||||||
|
{
|
||||||
|
og: {
|
||||||
|
something: 'test'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
metaManager
|
||||||
|
)
|
||||||
|
|
||||||
|
unmount() // Remove metadata when needed
|
||||||
|
```
|
||||||
|
|
||||||
### SSR
|
### SSR
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
|||||||
Reference in New Issue
Block a user