mirror of
https://github.com/tenrok/vue-meta.git
synced 2026-06-10 10:12:25 +03:00
docs: enhancements (#592)
* docs: enclose vue-meta in backticks * docs: add correct link to Factor * docs: enclose metaInfo and keyName in backticks * docs: fix typo
This commit is contained in:
@@ -14,7 +14,7 @@ For the latest version in the v1.x branch you can use:<br/>
|
||||
|
||||
Or you can replace `1` with the full version number you wish to use.
|
||||
|
||||
If you include vue-meta after Vue it will install automatically
|
||||
If you include `vue-meta` after Vue it will install automatically
|
||||
|
||||
**Unminified (suggested only for dev):**
|
||||
```html
|
||||
@@ -41,7 +41,7 @@ $ npm i vue-meta
|
||||
|
||||
:::warning Using a framework?
|
||||
|
||||
If you use a framework like Nuxt.js or Gridsome, vue-meta comes pre-installed and this step is most likely **not** required. Consult the [documentation](/guide/frameworks.html) of your framework for more information
|
||||
If you use a framework like Nuxt.js or Gridsome, `vue-meta` comes pre-installed and this step is most likely **not** required. Consult the [documentation](/guide/frameworks.html) of your framework for more information
|
||||
:::
|
||||
|
||||
If you add `vue-meta` with a package manager, you will need to install the `vue-meta` plugin manually:
|
||||
|
||||
@@ -48,7 +48,7 @@ _Corresponding issue_: [#404](https://github.com/nuxt/vue-meta/issues/404)
|
||||
Please read [Multiple Vue apps support](/guide/multiple-apps.html#ssr) as a prerequisite
|
||||
:::
|
||||
|
||||
To optimize performance, VueMeta will only initialize for a Vue app when it finds a metaInfo property on any of the loaded components. That means if you render all your components by passing the component instance directly to the render function, Vue will only know of these components once the app gets mounted (see snippet below). And this means VueMeta is unable to find any metaInfo when it looks if its need to initialize in the `beforeCreate` hook and the appId will not be changed to the [ssrAppId](/api#ssrappid)
|
||||
To optimize performance, VueMeta will only initialize for a Vue app when it finds a `metaInfo` property on any of the loaded components. That means if you render all your components by passing the component instance directly to the render function, Vue will only know of these components once the app gets mounted (see snippet below). And this means VueMeta is unable to find any `metaInfo` when it looks if its need to initialize in the `beforeCreate` hook and the appId will not be changed to the [ssrAppId](/api#ssrappid)
|
||||
|
||||
```js
|
||||
/* this is an example of when metaInfo will only become available once the
|
||||
@@ -68,7 +68,7 @@ export default App {
|
||||
};
|
||||
```
|
||||
|
||||
This will result in all the metaInfo properties of your ssr app to be rendered twice, once with [ssrAppId](/api#ssrappid) and once with appId `1`.
|
||||
This will result in all the `metaInfo` properties of your ssr app to be rendered twice, once with [ssrAppId](/api#ssrappid) and once with appId `1`.
|
||||
|
||||
To prevent this, either make sure there is any metaInfo configured (on any component) when the `beforeCreate` hook runs. Alternative (but not recommended) you could set [ssrAppId](/api#ssrappid) to `1` as well.
|
||||
To prevent this, either make sure there is any `metaInfo` configured (on any component) when the `beforeCreate` hook runs. Alternative (but not recommended) you could set [ssrAppId](/api#ssrappid) to `1` as well.
|
||||
|
||||
|
||||
@@ -20,4 +20,4 @@ Proceed to the [Vue-Storefront documentation](https://docs.vuestorefront.io/)
|
||||
|
||||
## Factor
|
||||
|
||||
Proceed to the [Factor documentation](https://factor.dev/guide/meta)
|
||||
Proceed to the [Factor documentation](https://factor.dev/docs/metainfo)
|
||||
|
||||
@@ -5,7 +5,7 @@ You can define a `[keyName]` property in any of your components, by default this
|
||||
See the [API](/api) for a list of recognised `metaInfo` properties
|
||||
|
||||
::: tip Note
|
||||
Altough we talk about the `metaInfo` variable on this page, please note that the keyName is [configurable](/api/#keyname) and could be different in your case. E.g. [Nuxt.js](https://nuxtjs.org/api/pages-head#the-head-method) uses `head` as keyName
|
||||
Although we talk about the `metaInfo` variable on this page, please note that the `keyName` is [configurable](/api/#keyname) and could be different in your case. E.g. [Nuxt.js](https://nuxtjs.org/api/pages-head#the-head-method) uses `head` as `keyName`
|
||||
:::
|
||||
|
||||
**App.vue:**
|
||||
|
||||
Reference in New Issue
Block a user