mirror of
https://github.com/tenrok/vue-meta.git
synced 2026-06-10 12:52:24 +03:00
chore: spell & consistency check
This commit is contained in:
pimlie
+2
-2
@@ -7,8 +7,8 @@ We would like your help with this! Please visit the [Vue Meta v3.0 rfc](https://
|
||||
:::
|
||||
|
||||
# Introduction
|
||||
Vue Meta is a [Vue.js](https://vuejs.org) plugin that allows you to manage your app's metadata, much like [`react-helmet`](https://github.com/nfl/react-helmet) does for React. However, instead of setting your data as props passed to a proprietary component, you simply export it as part of your component's data using the `metaInfo` property.
|
||||
`vue-meta` is a [Vue.js](https://vuejs.org) plugin that allows you to manage your app's metadata, much like [`react-helmet`](https://github.com/nfl/react-helmet) does for React. However, instead of setting your data as props passed to a proprietary component, you simply export it as part of your component's data using the `metaInfo` property.
|
||||
|
||||
These properties, when set on a deeply nested component, will cleverly overwrite their parent components' `metaInfo`, thereby enabling custom info for each top-level view as well as coupling meta info directly to deeply nested subcomponents for more maintainable code.
|
||||
These properties, when set on a deeply nested component, will cleverly overwrite their parent components' `metaInfo`, thereby enabling custom info for each top-level view as well as coupling meta info directly to deeply nested sub components for more maintainable code.
|
||||
|
||||
[Get started](/guide) or play with the [examples](https://github.com/nuxt/vue-meta/tree/master/examples)
|
||||
|
||||
+7
-7
@@ -22,7 +22,7 @@ The name of the attribute vue-meta arguments on elements to know which it should
|
||||
- type `string`
|
||||
- default `data-vue-meta-server-rendered`
|
||||
|
||||
The name of the attribute that is aded to the `html` tag to inform `vue-meta` that the server has already generated the meta tags for the initial render
|
||||
The name of the attribute that is added to the `html` tag to inform `vue-meta` that the server has already generated the meta tags for the initial render
|
||||
|
||||
See [How to prevent update on page load](/faq/prevent-initial)
|
||||
|
||||
@@ -30,7 +30,7 @@ See [How to prevent update on page load](/faq/prevent-initial)
|
||||
- type `string`
|
||||
- default `vmid`
|
||||
|
||||
The property that tells vue-meta to overwrite (instead of append) an item in a tag list.
|
||||
The property that tells `vue-meta` to overwrite (instead of append) an item in a tag list.
|
||||
For example, if you have two `meta` tag list items that both have `vmid` of 'description',
|
||||
then vue-meta will overwrite the shallowest one with the deepest one.
|
||||
|
||||
@@ -50,7 +50,7 @@ The key name for possible meta templates
|
||||
- type `boolean`
|
||||
- default `false`
|
||||
|
||||
When `true` then vue-meta will pause updates once page navigation starts and resumes updates when navigation finishes (resuming also triggers an update).
|
||||
When `true` then `vue-meta` will pause updates once page navigation starts and resumes updates when navigation finishes (resuming also triggers an update).
|
||||
This could both be a performance improvement as a possible fix for 'flickering' when you are e.g. replacing stylesheets
|
||||
|
||||
## Plugin methods
|
||||
@@ -100,7 +100,7 @@ Resumes metadata updates after they have been paused. If `refresh` is `true` it
|
||||
## metaInfo properties
|
||||
|
||||
::: tip Note
|
||||
The documentation below uses `metaInfo` in the examples, please note that this keyName is [configurable](/api/#keyname) and could be different in your case
|
||||
The documentation below uses `metaInfo` as `keyName` in the examples, please note that this is [configurable](/api/#keyname) and could be different in your case
|
||||
:::
|
||||
|
||||
### title
|
||||
@@ -391,10 +391,10 @@ By default, `vue-meta` sanitizes HTML entities in _every_ property. You can disa
|
||||
- type `object`
|
||||
|
||||
::: warning
|
||||
By disabling sanitization, you are opening potential vectors for attacks such as SQL injection & Cross-Site Scripting (XSS). Be very careful to not compromise your application.
|
||||
By disabling sanitation, you are opening potential vectors for attacks such as SQL injection & Cross-Site Scripting (XSS). Be very careful to not compromise your application.
|
||||
:::
|
||||
|
||||
Provides same functionality as `__dangerouslyDisableSanitizers` but you can specify which property for which `tagIDKeyName` sanitation should be disabled. It expects an object with the vmid's as key and an array with property keys as value:
|
||||
Provides same functionality as `__dangerouslyDisableSanitizers` but you can specify which property for which `tagIDKeyName` sanitation should be disabled. It expects an object with the vmid as key and an array with property keys as value:
|
||||
|
||||
```js
|
||||
{
|
||||
@@ -446,7 +446,7 @@ The callback receives the following arguments:
|
||||
### afterNavigation
|
||||
- type `Function`
|
||||
|
||||
A callback function which is called when `vue-meta` has updated the metadata after navigation occured.
|
||||
A callback function which is called when `vue-meta` has updated the metadata after navigation occurred.
|
||||
This can be used to track page views with the updated document title etc.
|
||||
|
||||
Adding a `afterNavigation` callback behaves the same as when [refreshOnceOnNavigation](/api/#refreshonceonnavigation) is `true`
|
||||
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
# How is `metaInfo` resolved?
|
||||
|
||||
You can define a `metaInfo` property on any component in the tree. Child components that have `metaInfo` will recursively merge their `metaInfo` into the parent context, overwriting any duplicate properties. To better illustrate, consider this component heirarchy:
|
||||
You can define a `metaInfo` property on any component in the tree. Child components that have `metaInfo` will recursively merge their `metaInfo` into the parent context, overwriting any duplicate properties. To better illustrate, consider this component hierarchy:
|
||||
|
||||
```html
|
||||
<parent>
|
||||
@@ -73,4 +73,4 @@ This is not what we want, since the meta `description` needs to be unique for ev
|
||||
<meta vmid="description" name="description" content="bar">
|
||||
```
|
||||
|
||||
While solutions like `react-helmet` manage the occurrence order and merge behaviour for you automatically, it involves a lot more code and is therefore prone to failure in some edge-cases, whereas this method is _almost_ bulletproof because of its versatility; _at the expense of one tradeoff:_ these `vmid` properties will be rendered out in the final markup (`vue-meta` uses these client-side to prevent duplicating or overriding markup). If you are serving your content GZIP'ped, then the slight increase in HTTP payload size is negligible.
|
||||
While solutions like `react-helmet` manage the occurrence order and merge behaviour for you automatically, it involves a lot more code and is therefore prone to failure in some edge-cases, whereas this method is _almost_ bulletproof because of its versatility; _at the expense of one tradeoff:_ these `vmid` properties will be rendered out in the final markup (`vue-meta` uses these client-side to prevent duplicating or overriding markup). If you are serving your content gzipped, then the slight increase in HTTP payload size is negligible.
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
# Any performance considarations?
|
||||
# Any performance considerations?
|
||||
|
||||
Short answer, no
|
||||
|
||||
On the client, `vue-meta` batches DOM updates using [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame). It needs to do this because it registers a Vue mixin that subscribes to the [`beforeMount`](https://vuejs.org/api/#beforeMount) lifecycle hook on all components in order to be notified that renders have occurred and data is ready. If `vue-meta` did not batch updates, the DOM meta info would be re-calculated and re-updated for every component on the page in quick-succession.
|
||||
On the client, `vue-meta` batches DOM updates using [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame). It needs to do this because it registers a Vue mixin that subscribes to the [`beforeMount`](https://vuejs.org/api/#beforeMount) lifecycle hook on all components in order to be notified that renders have occurred and data is ready. If `vue-meta` did not batch updates, the DOM metadata would be re-calculated and re-updated for every component on the page in quick-succession.
|
||||
|
||||
Thanks to batch updating, the update will only occurr once - even if the correct meta info has already been compiled by the server. If you don't want this behaviour, see below.
|
||||
|
||||
@@ -11,6 +11,6 @@ Previous versions of vue-meta injected lifecycle hooks from the global mixin on
|
||||
|
||||
Since v2.0 runtime performance should be improved due to:
|
||||
- the global mixin injects just a `beforeCreate` lifecycle hook, other hooks are only added for components which define `metaInfo`
|
||||
- we track component branches with `vue-meta` components which means that when refreshing metadata we can skip branches without metaInfo
|
||||
- we track component branches with `vue-meta` components which means that when refreshing metadata we can skip branches without `metaInfo`
|
||||
|
||||
:::
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
This step is optional if you don't need SSR and `Vue` is available as a global variable. `vue-meta` will install itself in this case.
|
||||
:::
|
||||
|
||||
In order to use this plugin, you first need to pass it to `Vue.use` - if you're not rendering on the server-side, your JS entry file will suffice. If you are rendering on the server, then place it in a file that runs both on the server and on the client before your root instance is mounted. If you're using [`vue-router`](https://github.com/vuejs/vue-router), then your main `router.js` file is a good place:
|
||||
In order to use this plugin, you first need to pass it to `Vue.use` - if you're not rendering on the server-side, your entry file will suffice. If you are rendering on the server, then place it in a file that runs both on the server and on the client before your root instance is mounted. If you're using [`vue-router`](https://github.com/vuejs/vue-router), then your main `router.js` file is a good place:
|
||||
|
||||
**router.js:**
|
||||
```js
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
## Reactive variables in template functions
|
||||
|
||||
Both [title](/api/#titletemplate) as [meta](/api/#content-templates) support using template function.
|
||||
Due to how Vue.js determines reactivity it is not possible to use reactive variables directly in template function
|
||||
Due to how Vue determines reactivity it is not possible to use reactive variables directly in template function
|
||||
|
||||
```js
|
||||
{
|
||||
|
||||
@@ -14,7 +14,7 @@ With content value we mean the following value of a `metaInfo` property:
|
||||
- the value of `[contentKeyName]` or `innerHTML` keys for `collection` types as [`meta`](/api/#meta)
|
||||
:::
|
||||
|
||||
The following might be a bit-farfetched, but its just an example
|
||||
The following might be a bit-far-fetched, but its just an example
|
||||
```js
|
||||
// parent
|
||||
metaInfo: {
|
||||
@@ -99,10 +99,10 @@ methods: {
|
||||
|
||||
## Boolean attributes
|
||||
|
||||
`vue-meta` maintains a [list](https://github.com/nuxt/vue-meta/blob/master/src/shared/constants.js) of attributes which are boolean attributes according to the HTML specs (and some extra). Whatever value you will pass to these attributes, they will be rendered as a boolean attribute.<sup>*</sup>
|
||||
`vue-meta` maintains a [list](https://github.com/nuxt/vue-meta/blob/master/src/shared/constants.js) of attributes which are Boolean attributes according to the HTML specs (and some extra). Whatever value you will pass to these attributes, they will be rendered as a Boolean attribute.<sup>*</sup>
|
||||
|
||||
<sup>*</sup><small>Except for the special values `undefined` and `null`, see above</small>
|
||||
|
||||
:::tip Note
|
||||
Prior to `v2.0` any attribute key with `undefined` as value was rendered as boolean attribute. This has been removed as packagers often remove object properties with an `undefined` value as given `a = {}` then `a.a === undefined`
|
||||
Prior to `v2.0` any attribute key with `undefined` as value was rendered as Boolean attribute. This has been removed as bundlers often remove object properties with an `undefined` value as given `a = {}` then `a.a === undefined`
|
||||
:::
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
# Server Side Rendering
|
||||
|
||||
If you have an isomorphic/universal webapp, you'll likely want to render your metadata on the server side as well. Here's how.
|
||||
If you have an isomorphic/universal web application, you'll likely want to render your metadata on the server side as well. Here's how.
|
||||
|
||||
## Add `vue-meta` to the context
|
||||
|
||||
|
||||
@@ -9,7 +9,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
|
||||
|
||||
**Uncompressed:**
|
||||
```html
|
||||
|
||||
Reference in New Issue
Block a user