ben-rogerson / nuxt-seomatic-meta Goto Github PK
View Code? Open in Web Editor NEWA module for connecting Nuxt.js to the Craft CMS SEOmatic plugin via GraphQL. Nuxt-o-matic!
A module for connecting Nuxt.js to the Craft CMS SEOmatic plugin via GraphQL. Nuxt-o-matic!
This would be awesome... :)
We've set this up on a project and got it working locally (with the workaround mentioned in #4 )
But now that we've pushed the project to a live server we're just getting CORS errors. All our other graphql requests go through fine (using apollo), which leads me to think that there's got to be something in the way this is set up?
Hi,
I'm experiencing an issue with the multisite logic.
Iโm using nuxt-i18n to manage the languages of my application. For a same page in two different languages, the URLs are like the following:
The issue is that, when I do have a /fr
prefix in my route, that prefix is sent to SEOmatic via the uri
parameter (see screenshot below), and because of this SEOmatic cannot find the related entry. Craft does not include the language in the URIs of the pages. When I remove this prefix manually, it works.
This is what I did (in a simplified version) to make it work:
let fullPath = route.fullPath;
if (fullPath.startsWith('/fr')) {
fullPath = route.fullPath.replace('/fr/', '/');
}
return await app.seomaticMeta({ fullPath }, siteId);
I guess we can agree this is not a sustainable solution. Is there a way (with the current methods/configuration elements) to indicate to the plugin the languages to remove from the path for all the pages? Would it be possible to implement that feature otherwise?
Is it possible to support nuxt 3
Not an issue, just a shout out - this saved me sooo much time!
Thanks
Hi Ben,
I've been working on a headless Nuxt website with CraftCMS and SEOMatic. Everything's working fine, except the homepage which is not loading the metadata. All other pages are fine.
Tried remapping the route in my nuxt.config.js as follows. Which does show the correct information in my console. However it does not seem to update the tags in the head.
seomaticMeta: { debug: true, backendUrl: process.env.BACKEND_URL, graphqlPath: process.env.GRAPHQL_PATH, graphQlToken: process.env.GRAPHQL_TOKEN, routeRemap: [ { path: '', getFrom: 'home', }, ], },
The slug of my homepage is 'home'. Also tried using '/' as the path, but that does not return the right data in the console.
This is my mixin which I load in my index.vue:
export default { name: "seoMatic", 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; }, }
These are my specs:
Package.json for my frontend:
Nuxt 2.15.8
nuxt-seomatic-meta 0.2.2
CraftCMS
craftcms/cms 4.2.1
nystudio107/craft-seomatic 4.0.9
I hope you can help. Thanks in advance.
I tried setting this up, but for some reason all the requests come back with an undefined
response. I rewrote the plugin to inject the function into the context so I could use it synchronously, and then it worked just fine.
inject('nuxtSeomaticMeta', (fullPath, id) => {
//same code
});
So I'm wondering if there's something in the context of when the plugin is running? I've also logged out the actual query that's running, and putting that into a GraphQL client also returns the seomatic data.
First of all, thanks for creating this plugin! It's been super easy to integrate into our Nuxt/Craft setup.
I'm seeing an issue where tracking scripts don't seem to be running on page load/change. Had a quick look into the source code, and found that I think the trouble might be this line
nuxt-seomatic-meta/lib/plugin.js
Line 105 in f5d3c74
as (I believe) SEOmatic seems to return these scripts already in a string. Removing the extra stringifying so that the line becomes innerHTML: script
seems to fix the issue.
Running live on a production server the robots meta tag stays set to content="none" even with Environment: live.
<meta data-n-head="ssr" content="none" name="robots">
When adding nuxt-seomatic-meta to modules I get this unexpected token error which seems to be coming from the plugin chunk itself:
ERROR in ./.nuxt/lib.plugin.6ae22825.js friendly-errors 16:45:59
Syntax Error: Unexpected token, expected "," (90:20) friendly-errors 16:45:59
88 | ? Object.values(metaTagContainer).reduce(
89 | {
> 90 | if (next.name === 'description') {
| ^
91 | // Override description tag with updated description
92 | next.hid = 'description';
93 | }
friendly-errors 16:45:59
@ ./.nuxt/index.js 32:0-92 379:25-63 385:19-57
@ ./.nuxt/client.js
@ multi ./node_modules/@nuxt/components/lib/installComponents.js eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js
This error does not occur when I remove nuxt-seomatic-meta from the modules.
Here is my modules setup:
modules: [
'@nuxtjs/apollo',
'@nuxtjs/style-resources',
'nuxt-i18n',
'@nuxtjs/axios',
'nuxt-seomatic-meta'
],
and here is the code I am using:
head() {
return this.headData;
},
async asyncData (context) {
const siteId = context.app.i18n.locale;
return {
headData: await context.app.seomaticMeta(context.route, siteId),
}
},
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.