@netsells/nuxt-meta-builder NPM

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 set `content` 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`s`content` 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.