File tree 1 file changed +40
-3
lines changed
1 file changed +40
-3
lines changed Original file line number Diff line number Diff line change @@ -88,12 +88,33 @@ import { useMeta, useActiveMeta } from 'vue-meta'
88
88
89
89
export default {
90
90
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
92
95
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`
94
102
})
95
103
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
97
118
const metadata = useActiveMeta ()
98
119
99
120
watch (metadata, (newValue ) => {
@@ -103,6 +124,22 @@ export default {
103
124
}
104
125
```
105
126
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
+
106
143
### SSR
107
144
108
145
``` js
You can’t perform that action at this time.
0 commit comments