Nice tutorial. Wanted to know how to get Apollo into Nuxt3 and this was what I needed. Tip though, instead of passing all the individual properties into the character card. eg name, image, location etc. You can just pass the character object, saves a whole lot of typing and makes your code look cleaner too.
Hey, I am glad you liked it! I just checked that and you are right. I did some research and it seems that Nitro (that is a server working under the hood of Nuxt) is detecting a hosting platform and selecting image provider to Vercel which may not support modifiers like Grayscale.
Thx you for this tutorial. It helpt me setup this stack a lot. I like it that you just started the project and ran into problems together with us. Strange that nuxt image is not working correctly with nuxt 3. Grayscale isn't working as it should and I can't find a solution for it. Passing an empty object (or undefined as I did) isn't the way it should be off course.
Alright, this looks great, One question, though: Why are you not using the vue lifecycle hooks with mounted, for instance? Or even the export defaults statement. I was under the impression that the query should be on a setup or mounted hook, but it works even without the exports defaults, and I am confused why
Hey, Good question! In general, the composables such as `useAsyncQuery` are wrappers around composables like `useAsyncData` that are triggered in the certain lifecycle hooks. Thanks to that, you dont have to trigger them from inside Vue lifecycle hooks while it will work similar. Also Because it is using the useAsyncData, the call is done on the server and the data is then used to hydrate the html :)
Hey i have a question: Iam using shopify storefront api with nuxt and apollo. but i dont want to expose the storefront api access token to the clinet (in the X-Shopify-Storefront-Access-Token header). is there a way to have apollo client in nuxt server middleware to pass the data to a custom route?
Hey, I think that you would need to create your custom logic around apollo in a server middleware where you could define a private runtime config (that is accessible only on the server side). I am using such solution in my nuxt security module for passing values for basic auth github.com/Baroshem/nuxt-security/blob/cd3ebb9f52aaf1b97e735b6ba2b7d197d3746f6f/src/module.ts#L126
@@jacobandrewsky Thank you so much for your response. When I have apollo on the server middleware , the api calls will be requested from my server ip not from the client or? and also the caching would be server side so for all users basically the same cache. Am i right or did you ment something different? :D
Hey, thank you so much! I havent tried connecting it through a pinia store and to be honest I don't think that it is a good idea. When using the default approach of the module you can query the API with GraphQL directly from the component/page/layout. You can however store the result in the pinia store and have access to it across your app. But you can achieve the similar result by using the composables themselves :)
Hey, I dont think that this functionality requires a separate video. It is just about sending a mutate query on click event with some data from the input for example. If you like, I can provide you some links and other videos on how to achieve that :)
When I fetch query with Nuxt I can see data but when I restart server it doesn't show data anymore. Any suggestion? I use nuxt3 with Strapi. Thanks for the video!
My friend!!! Thank you so much for this !
Thanks buddy!
I am happy that you like it!
This is the best free software Ive seen. Respect.
I really enjoyed building this project by using Nuxt 3 and the modules. And I am happy that you like it too!
BROOO thankyou so much, this really helped and the tutorial was really easy to use as well :)
Glad it helped!
Nice tutorial. Wanted to know how to get Apollo into Nuxt3 and this was what I needed.
Tip though, instead of passing all the individual properties into the character card. eg name, image, location etc. You can just pass the character object, saves a whole lot of typing and makes your code look cleaner too.
Thanks for the kind words!
Also, good tip!
do more of this!! this is amazing
Thanks! I will do more! Do you have some ideas on what topic I could tackle next?
Thanks for shared!
Thanks for watching!
Exactly what I was looking for, thank you. Um, have you noticed that when you deployed the dead aren’t grayscale. 😂
Hey, I am glad you liked it!
I just checked that and you are right. I did some research and it seems that Nitro (that is a server working under the hood of Nuxt) is detecting a hosting platform and selecting image provider to Vercel which may not support modifiers like Grayscale.
Nice tutorial.... Very helpful
Glad it was helpful!
Amazing video
Hello, i did the same step but every time I reload the page, I got undefined in my data?
Thx you for this tutorial. It helpt me setup this stack a lot. I like it that you just started the project and ran into problems together with us.
Strange that nuxt image is not working correctly with nuxt 3. Grayscale isn't working as it should and I can't find a solution for it. Passing an empty object (or undefined as I did) isn't the way it should be off course.
I am glad that you liked the tutorial.
AFAIK, the nuxt image 1.0.0 is planned for the next weeks so maybe this issue will be solved by then :)
Worked, thx
You're welcome!
thank you bro thank you
You're welcome!
Hey, this may sound odd, but are tailwind snippets not working on vs for anyone? did you find a fix?
it work on my pc thx bro vеry much
Welcome 👍
There is no better feeling than when the code works on someone else PC ;)
Not bad. I liked the bot. I launched it, but I don�t understand how to set it up
Thanks! Could you tell me more about your issues with setting up?
Alright, this looks great,
One question, though: Why are you not using the vue lifecycle hooks with mounted, for instance? Or even the export defaults statement. I was under the impression that the query should be on a setup or mounted hook, but it works even without the exports defaults, and I am confused why
Hey,
Good question! In general, the composables such as `useAsyncQuery` are wrappers around composables like `useAsyncData` that are triggered in the certain lifecycle hooks. Thanks to that, you dont have to trigger them from inside Vue lifecycle hooks while it will work similar. Also Because it is using the useAsyncData, the call is done on the server and the data is then used to hydrate the html :)
Hey i have a question: Iam using shopify storefront api with nuxt and apollo. but i dont want to expose the storefront api access token to the clinet (in the X-Shopify-Storefront-Access-Token header). is there a way to have apollo client in nuxt server middleware to pass the data to a custom route?
Hey,
I think that you would need to create your custom logic around apollo in a server middleware where you could define a private runtime config (that is accessible only on the server side). I am using such solution in my nuxt security module for passing values for basic auth github.com/Baroshem/nuxt-security/blob/cd3ebb9f52aaf1b97e735b6ba2b7d197d3746f6f/src/module.ts#L126
@@jacobandrewsky Thank you so much for your response. When I have apollo on the server middleware , the api calls will be requested from my server ip not from the client or? and also the caching would be server side so for all users basically the same cache. Am i right or did you ment something different? :D
Nice tutorial. Thankyou so much. But I have a question. Is it possible to connect all this with a store? Pinia for example? Thank you.
Hey, thank you so much! I havent tried connecting it through a pinia store and to be honest I don't think that it is a good idea. When using the default approach of the module you can query the API with GraphQL directly from the component/page/layout. You can however store the result in the pinia store and have access to it across your app. But you can achieve the similar result by using the composables themselves :)
that is awesome ma men, can you make another tutorial to mutate data when button is clicked??
Hey, I dont think that this functionality requires a separate video. It is just about sending a mutate query on click event with some data from the input for example. If you like, I can provide you some links and other videos on how to achieve that :)
When I fetch query with Nuxt I can see data but when I restart server it doesn't show data anymore. Any suggestion? I use nuxt3 with Strapi.
Thanks for the video!
Hmm, that is quite strange error. Could you report this issue to nuxt github repository? We could help you from there better :)
I dоwnloaded everything is okay
Awesome!
This is the best free software Ive seen. Respect.
Thanks!