mirror of
https://github.com/tenrok/vue-meta.git
synced 2026-06-12 22:52:24 +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 {
|
||||
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({
|
||||
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()
|
||||
|
||||
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
|
||||
|
||||
```js
|
||||
|
||||
Reference in New Issue
Block a user