nuxt-seomatic-meta-apollo v0.3.3
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.
Install
nuxt-seomatic-meta-apollo
via yarn or npm:yarn add nuxt-seomatic-meta-apollo # or: npm install nuxt-seomatic-meta-apollo
Add the seomatic-meta and apollo plugins to your modules section in
nuxt.config.js
:/* ** Nuxt.js modules */ modules: [ 'nuxt-seomatic-meta-apollo', '@nuxtjs/apollo', // '@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.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) GRAPHQL_TOKEN=ACCESS_TOKEN_SECRET
b) Or add the connection settings to a new
seomaticMeta
object innuxt.config.js
:/* ** Seomatic meta config */ seomaticMeta: { graphqlToken: 'ACCESS_TOKEN_SECRET', },
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',
},
],
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!