Skip to content
A module for connecting Nuxt.js to the Craft CMS SEOmatic plugin via GraphQL. Nuxt-o-matic!
JavaScript
Branch: master
Clone or download
Latest commit 5c1f9e9 Nov 1, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib fix tracking scripts output Nov 1, 2019
.gitignore
README.md
package-lock.json
package.json

README.md

nuxt-seomatic-meta   NPM

Icon

If you're using Nuxt.js with Craft CMS headless then there's a good chance you'll be aiming for some decent SEO. A custom solution would take too much time, so a great alternative is to request the SEO data from SEOmatic via GraphQL.

This module grabs the SEOmatic data and converts it to a format that Nuxt.js expects in it's head property.

Getting started

Before starting, I'll assume you've installed Craft (>=3.3), SEOmatic (>=3.2.28) and enabled Crafts GraphQL API.

⚠️ Note: Craft can't be in headlessMode - Headless mode won't work with SEOmatic as we need to match the URI which gets turned off when headlessMode is enabled.

⚠️ Note: Within Craft > GraphQL > Schemas, be sure to adjust the scope to the right entries in the GraphQL schema - I find it easy to forget that.

  1. Install nuxt-seomatic-meta via yarn or npm:

    yarn add nuxt-seomatic-meta
    # or: npm install nuxt-seomatic-meta
  2. Add the seomatic-meta and axios plugins to your modules section in nuxt.config.js:

    /*
     ** Nuxt.js modules
     */
    modules: [
      'nuxt-seomatic-meta',
      '@nuxtjs/axios',
      // '@nuxtjs/dotenv',
    ],

    '@nuxtjs/axios': Axios is used to connect to the Craft CMS API - it's automatically installed as a dependency of nuxt-seomatic-meta so you'll just need to add it to the array.

    '@nuxtjs/dotenv' (optional): To specify your GraphQL connection variables in a .env file then install the nuxt dotenv module.

  3. Now specify the GraphQL connection settings - you have two options:

    a) Add the connection settings to an .env file in your project root (if you're using the @nuxtjs/dotenv module):

    # Craft installation url
    BACKEND_URL=https://YOUR_DOMAIN
    
    # GraphQL api path
    GRAPHQL_PATH=/api
    
    # GraphQL bearer token (Not required if API is public)
    GRAPHQL_TOKEN=ACCESS_TOKEN_SECRET

    b) Or add the connection settings to a new seomaticMeta object in nuxt.config.js:

    /*
     ** Seomatic meta config
     */
    seomaticMeta: {
      backendUrl: 'http://YOUR_DOMAIN',
      graphqlPath: '/api',
      graphqlToken: 'ACCESS_TOKEN_SECRET',
    },
  4. Lastly, add some code to start the API request and supply the result to Nuxt's head property. This is added to your pages in pages/*.vue:

    <script>
    export default {
      //...
    
      // Get Seomatic data from Craft by route
      async asyncData({ app, route }) {
        return {
          headData: await app.seomaticMeta(route)
        };
      },
    
      // Supply the data to the Nuxt head property
      head() {
        return this.headData;
      }
    };
    </script>

Configuration

Options can be supplied in a seomaticMeta object in nuxt.config.js:

seomaticMeta: {
  debug: true,
  routeRemap: [
    {
      path: '/',
      getFrom: 'homepage',
    },
    {
      path: 'another-route',
      getFrom: 'gets-meta-from-this-route-instead',
    },
  ],
  backendUrl: 'http://YOUR_DOMAIN',
  graphqlPath: '/api',
  graphqlToken: 'ACCESS_TOKEN_SECRET',
},
Name Type Default Description
debug boolean false Display the GraphQL data and other useful feedback in your console when using npm run generate.
routeRemap array [] Custom remapping of route data so you can grab the SEOmatic data from another page.
Eg: Your Nuxt homepage has a route of / but you want data from a page in Craft with a slug of homepage.
backendUrl string `` The url for your Craft installation.
This can also be defined in your .env under the key BACKEND_URL.
graphqlPath string `` The path to your GraphQL API.
This can also be defined in your .env under the key GRAPHQL_PATH.
graphqlToken string `` The token for your secured GraphQL endpoint.
This can also be defined in your .env under the key GRAPHQL_TOKEN.

Note: .env variables require the dotenv module.

Author

👤 Ben Rogerson info@benrogerson.com.au (https://benrogerson.com.au)

👷 TODO

  • Add support for multi-site installs (request it!)
  • Add support for the CraftQL plugin

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check the issues page.

Show your support

Give a ⭐️ if this project helped you!

You can’t perform that action at this time.