0.3.3 • Public • Published

nuxt-seomatic-meta-apollo   NPM


Forked from Ben Rogerson's nuxt-seomatic-meta. Works with Apollo instead of Axios. Also works with Craft in Headless mode.

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: 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-apollo via yarn or npm:

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

     ** Nuxt.js modules
    modules: [
      // '@nuxtjs/dotenv',

    '@nuxtjs/apollo': Apollo is used to connect to the Craft CMS API - it's automatically installed as a dependency of nuxt-seomatic-meta-apollo 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):

    # GraphQL bearer token (Not required if API is public) 

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

     ** Seomatic meta config
    seomaticMeta: {
      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:

    export default {
      // Get Seomatic data from Craft by route
      async asyncData({ app, route }) {
        const siteId = 1 // For multi-site installs
        return {
          headData: await app.seomaticMeta(route, siteId)
      // Supply the data to the Nuxt head property
      head() {
        return this.headData;


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',
  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.

🤝 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!

Package Sidebar


npm i nuxt-seomatic-meta-apollo

Weekly Downloads






Unpacked Size

11.3 kB

Total Files


Last publish


  • devotoare