Nuxt Meta Builder
A fluent approach to building up the meta data object within a Nuxt project
Why?
The standard approach to building up the meta content powered by vue-meta is to manually create an object with keys and values and is often a repeated mess across pages. This approach makes this a bit more readable via fluent methods.
Installation
yarn add @netsells/nuxt-meta-builder
Usage
Add the module to your nuxt config's modules
array:
module.exports = {
...
modules: [
'@netsells/nuxt-meta-builder',
],
...
};
You can then access the $metaBuilder
function on the Vue instance:
<script>
export default {
// Basic usage
head() {
return this.$metaBuilder()
.setTitle('My page title')
.setDescription('The description for the current page')
.make();
},
};
</script>
Available API Methods
Method | Description | Arguments |
---|---|---|
setDescription |
Set both the description and the og:description meta data |
val [required] - the description to set |
setTitle |
Set both the title and the og:title meta data |
hid - the title to setcontent [optional, default = false] - the title value to set |
addMeta |
Set specific meta values |
hid [required] - the unique meta tag id to set. Can be a single string or an array of string scontent [required] - the meta value to set |
make |
Generate the resulting object | None. |
Note: All public API methods return the class instance and can be chained, other than the make
command which returns the final meta object and should be called last.
License
MIT © Netsells