-
-
Notifications
You must be signed in to change notification settings - Fork 43
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Is there support for nuxt + vue 3 #168
Comments
Yes, Nuxt v3 depends on this package. If you use Did you have any questions or issues with it in Nuxt? |
Thank you for the answer! Yes a help would be very good.. I am using vue + nuxt 3, latest release. Composition API First Problem I have is that I can not acess "My Data" to make it dynamic, solved this declaring At first I used the component like this: import:
And I don't know what else I should to configure. The metadata should be Dynamic, because on this page will be different "projects" rendered Here is the code. (I removed some sensible data)
Thank you very much for your help, and this would definitely worth a beer :) |
Sure, let me try and help you with this. The issue you seem to be having is you're resolving the reactive data before it's sent into useHead. Let's look at this example: const myTitle = ref('initial title')
useHead({
title: `${myTitle}`
})
myTitle.value = 'new title' In this, the title would be 'initial title' no matter what happens to the ref value. To get around this, you should either provide the ref as is, a computed value, or a reactive getter. const myTitle = ref('initial title')
useHead({
title: myTitle
})
myTitle.value = 'new title' This would fix it. For your code, this is how I would personally handle it: useHead({
meta: [
{ hid: 'og-type', property: 'og:type', content: 'website' },
{ hid: 'og-title', property: 'og:title', content: () => `App Name - ${project.value.name}` },
{ hid: 'og-image', property: 'og:image', content: imageUrl },
]
}) The If that doesn't help then I might need some more of the code, specifically around how the project is being fetched. Also some tips:
|
Mega thank you, I will try it this evening and write an answer! Thank you! |
Hello, I have tried but it also did not work! Same as if I use static values, I have also tried in differents components. here is my setup code:
Thank you very much again for your help :) |
Could you confirm the issue in this second code example? It looks like it should work correctly, are you saying nothing is updating? |
Hello, yes this is the actual code, and unfortunately it does not work. Can you say a better way to test it? Maybe my tests are wrong. Thank you! |
Here is the development, and this code is present on this page. |
The code you provided has static useHead values and it looks like they are being added to that page. If you provide a dynamic code example and push that to that URL I can help you debug further. |
Perfect, I am going to do it right now and send you the changes |
I have updated the code: for projects it's now like this:
And in public vue:
Thank you!! |
I think you're missing the .value. Looking at the site it shows those values as undefined useHead({
title: 'Smart Wendel',
meta: [
{ property: 'og:type', content: 'website' },
{ property: 'og:title', content: () => `${project.value.name}` },
{ property: 'og:image', content: imageUrl },
{ property: 'og:description', content: () => `${project.value.excerpt}` }
]
}) |
Hello,
|
Please understand that the issue you're having is related to your code. You are not providing data correctly. I'm not exactly sure what you mean by this snippet, but you can see yourself that You can see this yourself by putting console logs in the functions useHead({
title: 'Smart Wendel',
meta: [
{ property: 'og:type', content: 'website' },
{ property: 'og:title', content: () => {
console.log(project, project.name)
return `${project.value.name}`
}
},
{ property: 'og:image', content: imageUrl },
{ property: 'og:description', content: () => `${project.value.excerpt}` }
]
}) |
Hello, thank you for the answer .. I made tests and confirm that In fact, the dynamic text is not working, with I also made some other tests, but no success. I have also another question, would Facebook, WhatsApp.. read those values ? Because it is only in elements, but not in the source code of the page. The only way I found to do that is in nuxt config with:
But it does not help, since I have dynamic pages and it is properties (projects). Thank you veeery much! |
If you're using SSR or SSG then they will be able to read these tags correctly. You can right click -> inspect source and you should be able to see the tags. As an example my personal site which uses dynamic tags for the |
Hi :) I have Issues to enable the SSR in my project, but at least now I understand how Thank you very much! |
I have the same problem sadly. e.g.:
metaTitle is generated dynamically. There has been definitely some breaking changes since v. 1.0, because as soon as I downgrade to version 0.7.12 then everything works perfectly. The way I test the SSR is using Any help would be great. Thanks! |
If you can make a reproduction repo I'll be happy to sort it out |
Hello, does this support Vue 3 + Nuxt 3 ?
Thank you!
The text was updated successfully, but these errors were encountered: