All Projects → ben-rogerson → nuxt-seomatic-meta

ben-rogerson / nuxt-seomatic-meta

Licence: other
A module for connecting Nuxt.js to the Craft CMS SEOmatic plugin via GraphQL. Nuxt-o-matic!

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to nuxt-seomatic-meta

Vuecnodejs
⚽️🎉Vue初/中级项目,CnodeJS社区重构。( a junior project of Vue.js, rewrite cnodejs.org ) 预览(DEMO):
Stars: ✭ 705 (+2417.86%)
Mutual labels:  seo, nuxt, nuxtjs
nuxt-jsonld
A Nuxt.js module to manage JSON-LD in Vue component.
Stars: ✭ 198 (+607.14%)
Mutual labels:  seo, nuxt, nuxtjs
Redirect Module
No more cumbersome redirects!
Stars: ✭ 235 (+739.29%)
Mutual labels:  seo, nuxt, nuxtjs
Sitemap Module
Sitemap Module for Nuxt
Stars: ✭ 539 (+1825%)
Mutual labels:  seo, nuxt, nuxtjs
Seo
SEO utilities including a unique field type, sitemap & redirect manager
Stars: ✭ 210 (+650%)
Mutual labels:  craft, seo, craftcms
craftbox
Simple Ubuntu Vagrant box targeted for Craft developers -
Stars: ✭ 28 (+0%)
Mutual labels:  craft, craftcms
hubble-frontend-pwa
E-Commerce PWA Frontend
Stars: ✭ 43 (+53.57%)
Mutual labels:  nuxt, nuxtjs
craft-json-snippets
Helps make CraftCMS models in .json
Stars: ✭ 17 (-39.29%)
Mutual labels:  craft, craftcms
nuxt-modules-cli
Browse Nuxt.js modules from the terminal
Stars: ✭ 25 (-10.71%)
Mutual labels:  nuxt, nuxtjs
vue-link
One component to link them all 🔗
Stars: ✭ 65 (+132.14%)
Mutual labels:  nuxt, nuxtjs
nuxtjs-examples
Example apps of Nuxt.js framework
Stars: ✭ 51 (+82.14%)
Mutual labels:  nuxt, nuxtjs
overflow.craft-plugin
A plain text Craft field type, with a soft or hard character limit.
Stars: ✭ 13 (-53.57%)
Mutual labels:  craft, craftcms
oembed
A simple plugin to extract media information from websites, like youtube videos, twitter statuses or blog articles.
Stars: ✭ 34 (+21.43%)
Mutual labels:  craft, craftcms
nuxt2-ssr-firebase
Nuxt2 Universal App with SSR via Firebase Functions and Firebase Hosting
Stars: ✭ 50 (+78.57%)
Mutual labels:  nuxt, nuxtjs
nuxtjs-sample
Nuxtjs sample! Typescript + Vuetify + Jest! (rails api server: https://github.com/walkersumida/rails-api-for-front)
Stars: ✭ 28 (+0%)
Mutual labels:  nuxt, nuxtjs
nuxt-quasar
Nuxt module for the Quasar Framework
Stars: ✭ 36 (+28.57%)
Mutual labels:  nuxt, nuxtjs
applicationinsights-module
Application Insights module for NuxtJS
Stars: ✭ 14 (-50%)
Mutual labels:  nuxt, nuxtjs
nuxt-modules
AX2's Nuxt modules
Stars: ✭ 30 (+7.14%)
Mutual labels:  nuxt, nuxtjs
nuxt-ssr-firebase
A example repo for using nuxt with firebase hosting and cloud functions
Stars: ✭ 58 (+107.14%)
Mutual labels:  nuxt, nuxtjs
nuxt-vite
Nuxt + Vite!! HMR so fast it'll make your head spin! Plus all the benefits of Nuxt
Stars: ✭ 54 (+92.86%)
Mutual labels:  nuxt, nuxtjs

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 }) {
        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;
      }
    };
    </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.

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].