- 24
- 59 313
Jacob Andrewsky
เข้าร่วมเมื่อ 28 พ.ค. 2022
• Senior Dev @VueStorefront • @GoogleDevExpert in Web Performance • Ambassador @nuxt_js, @Storyblok, @algolia, @cloudinary, @supabase • Teaching Vue, Nuxt, Perf
More secure Nuxt apps - by default 🛡️
Hello There!
In this video, you will learn about Nuxt Security - A Nuxt module that helps you build more secure Nuxt applications by default. I will show you how it works, what you can expect from the module and the documentation, and introduce you to some more advanced topics that you may want to check while working on your next (Nuxt) application 🚀
Check out VueSchool for great courses and tutorials vueschool.io/courses?friend=baroshem
GitHub - github.com/baroshem/nuxt-security
Previous video - th-cam.com/video/8RDPrptc9uU/w-d-xo.html
Docs - nuxt-security.vercel.app/
Article - dev.to/jacobandrewsky/more-secure-vue-nuxt-apps-by-default-3nhi
#javascript #programming #developer #css #typescript #community #opensource #vuejs #nodejs #nuxtjs #owasp #security
-------------------------------------------------------------------------------------------------
Twitter - jacobandrewsky
Blog - dev.to/jacobandrewsky
Linkedin - www.linkedin.com/in/jakub-andrzejewski/
Github - github.com/Baroshem
Timestamps:
0:00 Intro
0:40 VueSchool intro
1:08 Documentation
3:08 Local development (SSR)
3:55 Local development (SSG)
5:24 Header value customization globally or per route
6:47 Middleware functions (XSS Validator)
7:40 Middleware functions (Rate Limiter)
8:50 Configuring middleware functions per route or disabling
10:27 Summary
In this video, you will learn about Nuxt Security - A Nuxt module that helps you build more secure Nuxt applications by default. I will show you how it works, what you can expect from the module and the documentation, and introduce you to some more advanced topics that you may want to check while working on your next (Nuxt) application 🚀
Check out VueSchool for great courses and tutorials vueschool.io/courses?friend=baroshem
GitHub - github.com/baroshem/nuxt-security
Previous video - th-cam.com/video/8RDPrptc9uU/w-d-xo.html
Docs - nuxt-security.vercel.app/
Article - dev.to/jacobandrewsky/more-secure-vue-nuxt-apps-by-default-3nhi
#javascript #programming #developer #css #typescript #community #opensource #vuejs #nodejs #nuxtjs #owasp #security
-------------------------------------------------------------------------------------------------
Twitter - jacobandrewsky
Blog - dev.to/jacobandrewsky
Linkedin - www.linkedin.com/in/jakub-andrzejewski/
Github - github.com/Baroshem
Timestamps:
0:00 Intro
0:40 VueSchool intro
1:08 Documentation
3:08 Local development (SSR)
3:55 Local development (SSG)
5:24 Header value customization globally or per route
6:47 Middleware functions (XSS Validator)
7:40 Middleware functions (Rate Limiter)
8:50 Configuring middleware functions per route or disabling
10:27 Summary
มุมมอง: 868
วีดีโอ
Vue.js Forge Mighty Bites | VueUse
มุมมอง 33610 หลายเดือนก่อน
Hello There! In this Mighty Bytes video for Vue Forge, you will learn how to use VueUse that will allow you to handle common web cases like click outside, local storage, or mouse more easily! - vuejsforge.com/ - vueuse.org/ #javascript #programming #developer #css #typescript #community #opensource #vuejs #nodejs #nuxtjs Twitter - jacobandrewsky Blog - dev.to/jacobandrewsky Linkedin...
NuxtNation Mighty Bytes | Secure web apps with Nuxt Security
มุมมอง 27811 หลายเดือนก่อน
Hello There! In this Mighty Bytes video for Nuxt Nation conference, you will learn how to use Nuxt Security to deliver secure apps to your users! 🚀 - nuxtnation.com/ - nuxt-security.vercel.app #javascript #programming #developer #css #typescript #community #opensource #vuejs #nodejs #nuxtjs Twitter - jacobandrewsky Blog - dev.to/jacobandrewsky Linkedin - www.linkedin.com/in/jakub-an...
NuxtNation Mighty Bytes | Optimized images with Nuxt Image
มุมมอง 1.5K11 หลายเดือนก่อน
Hello There! In this Mighty Bytes video for Nuxt Nation conference, you will learn how to use Nuxt Image to deliver performant images to your users! 🚀 - nuxtnation.com/ - image.nuxt.com/ #javascript #programming #developer #css #typescript #community #opensource #vuejs #nodejs #nuxtjs Twitter - jacobandrewsky Blog - dev.to/jacobandrewsky Linkedin - www.linkedin.com/in/jakub-andrzeje...
Nuxt Modules Course
มุมมอง 2Kปีที่แล้ว
Hello There! In this crash course, you will learn how to build your first module. We will be recreating a module that I have already created - Nuxt Medusa and cover some basics to allow you to start building fast. Code repository - github.com/Baroshem/nuxt-medusa Video about Nuxt Medusa - th-cam.com/video/EuakPz8M7CM/w-d-xo.html Docs - nuxt.com/docs/guide/going-further/modules#module-author-gui...
Vue js Global Summit | Let's Talk about Security in Vue & Nuxt
มุมมอง 358ปีที่แล้ว
This is a recording of my talk about Security in Vue and Nuxt for Geekle Vue.js Global Summit. Twitter - jacobandrewsky Blog - dev.to/jacobandrewsky Linkedin - www.linkedin.com/in/jakub-andrzejewski/ Github - github.com/Baroshem
Nuxt, Shopify, and Storyblok Crash Course
มุมมอง 2.4Kปีที่แล้ว
Hello There! In this crash course, you will learn how to build a Composable Commerce application with Nuxt, Shopify, and Storyblok. For styling we will be using TailwindCSS and we will deploy the app to Vercel. Check out Vue Forge - vuejsforge.com/ Code repository - github.com/Baroshem/nuxt-shopify-storyblok Deployed app - nuxt-shopify-storyblok.vercel.app/ Article - dev.to/jacobandrewsky/serie...
Nuxt, Medusa, TailwindCSS Crash Course
มุมมอง 7Kปีที่แล้ว
Hello There! In this video, I am building a simple e-commerce website with Nuxt 3 and connect easily to Medusa Commerce by using the module that I have created. For styling I am using TailwindCSS and for image transformations I am using the Image module with default IPX. Finally, I have deployed the app to Vercel just to see how it works in production. Enjoy! My module - github.com/Baroshem/nux...
Nuxt 3, Tailwind, and Supabase Crash Course
มุมมอง 7Kปีที่แล้ว
Hello There! In this video, I am building a simple Nuxt 3 application that can fetch data from Supabase. For styling I am using TailwindCSS and for image transformations I am using the Image module with default IPX. Finally, I have deployed the app to Vercel just to see how it works in production. Enjoy! Code repository - github.com/Baroshem/nuxt3-tailwind-supabase Deployed app - nuxt3-tailwind...
Improving Security of Nuxt 3
มุมมอง 7Kปีที่แล้ว
Hello There! In this video, I will show you how to use the project that I was working on for some time already - 'nuxt-security'. It is a Security module for Nuxt 3 that helps you build more secure web applications! Documentation - nuxt-security.vercel.app/ Repository - github.com/baroshem/nuxt-security #community #javascript #programming #opensource #vuejs #nodejs #nuxtjs #typescript #security...
Front Stage - Dream Jamstack with Nuxt 3 and Storyblok 🚀
มุมมอง 2.1Kปีที่แล้ว
This is the recording of my talk for frontdevstage.com/ about Dream Jamstack with Nuxt 3 and Storyblok. #community #javascript #programming #opensource #vuejs #nodejs #nuxtjs #typescript #storyblok #jamstack #markdown Twitter - jacobandrewsky Blog - dev.to/jacobandrewsky Linkedin - www.linkedin.com/in/jakub-andrzejewski/ Github - github.com/Baroshem
Nuxt 3, Algolia, Storyblok, and TailwindCSS Crash Course
มุมมอง 1.7K2 ปีที่แล้ว
As you quite enjoyed the first live coding video, I decided to do another one! This time, I have built a very simple Digital Experience Platform with Nuxt 3, Algolia, Storyblok, and TailwindCSS. I also used NuxtImage but encountered some problems with 403 for one of the images. Finally, I have deployed the app to Vercel just to see how it works in production. Enjoy! Code repository - github.com...
Nuxt 3, Apollo GraphQL, and TailwindCSS Crash Course
มุมมอง 10K2 ปีที่แล้ว
This is my first recorded live coding session in a new format. In it, I am building a simple Nuxt 3 application that can fetch the data from Rick And Morty API by using the Apollo GraphQL. For styling I am using TailwindCSS and for image transformations I am using the Image module with default IPX. Finally, I have deployed the app to Vercel just to see how it works in production. Enjoy! Code re...
How to use Cloudinary Images with Nuxt 3
มุมมอง 2.5K2 ปีที่แล้ว
Cloudinary is a media management solution that not just allows teams to manage, optimize, and transform images, but video as well. In this tutorial, you will learn how to integrate it with Nuxt 3 app to optimize and manage images. #javascript #programming #developer #nuxtjs #image #optimization #opensource #performance Twitter - jacobandrewsky Blog - dev.to/jacobandrewsky Linkedin -...
Geekle JS Global Summit - The Future of E-Commerce is Open-Source and JavaScript
มุมมอง 1742 ปีที่แล้ว
This is the recording of my talk at @GeekleOfficial JS Global Summit event where I was talking about why I think that the future of E-Commerce is Open Source and JavaScript. #community #javascript #programming #ecommerce #opensource #vuejs #nodejs #nextjs #nuxtjs #typescript Twitter - jacobandrewsky Blog - dev.to/jacobandrewsky Linkedin - www.linkedin.com/in/jakub-andrzejewski/ Gith...
Vue.js Forge Tips | Using dynamic components
มุมมอง 4062 ปีที่แล้ว
Vue.js Forge Tips | Using dynamic components
Vue.js Forge Tips | List rendering destructuring
มุมมอง 1662 ปีที่แล้ว
Vue.js Forge Tips | List rendering destructuring
Vue.js Forge Tips | How to use Nuxi add command?
มุมมอง 3262 ปีที่แล้ว
Vue.js Forge Tips | How to use Nuxi add command?
Vue Storefront Conference | Fast & Headless - Build Headless Commerce in minutes
มุมมอง 3952 ปีที่แล้ว
Vue Storefront Conference | Fast & Headless - Build Headless Commerce in minutes
Vue Storefront Hackathon | Nuxt 3 A pursuit to great Developer Experience
มุมมอง 6562 ปีที่แล้ว
Vue Storefront Hackathon | Nuxt 3 A pursuit to great Developer Experience
#3 Building Headless Commerce - Adding Search Engine with Algolia
มุมมอง 1.1K2 ปีที่แล้ว
#3 Building Headless Commerce - Adding Search Engine with Algolia
#2 Building Headless Commerce - Adding Content with Storyblok CMS
มุมมอง 1K2 ปีที่แล้ว
#2 Building Headless Commerce - Adding Content with Storyblok CMS
#1 Building Headless Commerce with Nuxt 3, Shopify, and TailwindCSS
มุมมอง 7K2 ปีที่แล้ว
#1 Building Headless Commerce with Nuxt 3, Shopify, and TailwindCSS
Geekle Vue.js Global Summit | Building Modules for Nuxt 3
มุมมอง 3.1K2 ปีที่แล้ว
Geekle Vue.js Global Summit | Building Modules for Nuxt 3
Dude, your video is awesome. Thanks!
thanks for the video!!!
Can you use it with a Load Balancer? Some of the security implementations requires to save information, for example, the rate limiter will keep a counter for each sesion. If you have a Load Balancer, each nuxt instance will have a differente counter if you dont move storage system to an external place (like a redis for example) rigth?. So, can you configure this nuxt module for it? Thanks!
Hey there, good question! This module was not implemented with load balancer in mind. I am not even sure how it could work to be honest if it was supporting such external load balancer. If you need the LB, you can use external storage driver like you mentioned, If you have an idea how it could be implemented, please let me know in the github issue, I will be more than happy to review it so together we could find a way :)
@@jacobandrewsky Thanks for reply! Yes, I see. Reading the docs (Rate limiter), there is a disclaimer saying it's not for complex applications. If you need that kind of rate limiter, you should implement it at infrastructure layer instead of app layer. So, I guees best would be to configure AWS/Cloudflare/etc instead. Thanks again!
I followed all the steps but I get a cors error when I use my credentials :(
Hey, if so. I think you need to set the cors settings in your shopify dashboard Maybe these resources will help you community.shopify.com/c/hydrogen-headless-and-storefront/i-m-calling-the-storefront-api-from-the-online-store-and-getting/m-p/670746#M6050 shopify.dev/changelog/storefront-api-allows-for-cross-origin-resource-sharing
Hello, i did the same step but every time I reload the page, I got undefined in my data?
Should I use format=webp at any time ?
Not really. Depend on the users of your website. The better format is avig (more perfromant) but not sure if it is already supported but all major browsers. You can skip setting the format to let the image module set the image format automatically to the one supported by the browser
Would anyone be able to teach me medusa JS?
Man i love you so much, finally someone sharing his code using Nuxt and not React ! ❤
previously time was 75ms, after your change the load time changed to 793ms? why would one want to do that?
Hi, your tutorial is great! I have only one problem when using the function UseAsyncQuery, with a QUERY it works fine, but when you use it with a mutation it does not work. For example, when you create a checkout you need to use a mutation, therefore it's not going to work. Can you help?
Thank you for this. And please make some full stack projects in Nuxt 3 with best practices.
Amazing video
Super useful tutorial
Glad you think so!
Wish we can get a tutorial on VueUse
Could you please create similar app for magento?
Thank you!
You're welcome!
Thanks mate I try to build a store website with nuxt
Nice video
Thanks
Thank you!
Thank you for this overview! Is there a good reason to provide both a plugin and a composable? What’s recommended and why?
Hey, good question. So the plugin allows to provide a new functionality to the Nuxt app itself. And in general, you could use the module functionality by accessing the nuxt app itself. But in reality, the experience of using composables is much smoother. Not to mention that composables could sometimes do some work as well under the hood (like extracing certain data from the plugin like only getting product title and image instead of full product). And, composables could also be a wrapper around certain domain. Let's take a look at the e-commerce perspective. Having a composable for Cart could be quite useful because you have some logic there for fetching the cart, adding an item to cart, removing item, etc.
Always wanted to learn how to make Nuxt Modules! Now I have a basic understanding and I'll surely dig deeper into it... Thanks!👌
I am glad you liked it!
You are our hero. Thank you very much.
Thank you! 💚
bro ur code repository is disappear
Good catch. I have recorded this video long time ago and since then many things have changed in the Nuxt framework so basically all video content is out of date. I have recorded however a new tutorial series that you can check out on my channel that tackles similar topic :) th-cam.com/video/cfc8msc_Bk4/w-d-xo.html The approach however for adding Algolia has not changed so you can easily follow this tutorial but with the content from this new and updated tutorial :)
ok @@jacobandrewsky
👍
Another great course thanks my friend ❤
Thank you! Cheers!
This is awesome, just what I wanted to learn. Thanks Jacob!
Glad you liked it!
Ah, if only there was a guide when I was creating the module (searching for information in the documentation, relying on the source code of Nuxt, Nuxt-Kit, and other time-consuming tasks) Great content!
Glad I could help!
straight to the point and helpful!
Glad you liked it!
Really nice overview. Thanks! 👏
Glad you liked it!
War going on background
Yeah, my cats really like to fight :D
Hey Jacob can you create a full course with Medusa and nuxt from scratch to understand all the concept.
Hey Buddy, I can add it to the roadmap (I was quite busy recently) but I just published a new vidoe on my YT channel where I explained how to build Nuxt modules with an example of Nuxt Medusa :)
Hellos Jacob, does it work for server routes?
Hey, sorry but.I completely missed your message. The middleware is enabled globally so it should protect your app from any kind of contact, whether it is a client or server. You can also customize it to only enable it for certain routes to match your needs better :)
Thank you. Happy to see more advanced tutorials on youtube
You are welcome!
thank you.
Welcome!
Hey, this may sound odd, but are tailwind snippets not working on vs for anyone? did you find a fix?
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
О, надо обязательно посмотреть
Hello Jacob Andrewsky, Recently I tried to use this module but it breaks the PWA registration. Can you please solve this problem. Because I have tested a lot of time when I add security module only then the problem shows. Thanks
Hey, I don't know what the problem is so cannot really fix it. Could you please create an issue in the github repository with the reproduction in stackblitz? I will take a look at it then :)
@@jacobandrewsky sure soon I will update you
nice module. can you continue this project putting addtocart and payment stuff ? thankyou
Hey, I have been thinking about that but I realised that I prefer to add the functionalities that arenuxt specific (like giving access to SDK, handling server operations) while for other cases such as add to cart just write documentation that should help handling that :)
please make video on bootstrap 5 with nuxt 3.
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 :)
Thank you for this module
I am glad you liked it!
May I know the extension that showed the typescript error on 51:32
To be honest, I am not sure which one does that (as I have many extensions installed :D ) but I belive it is by the Volar extension
Would it not be better to make all graphql calls as server api calls instead?
I would say that it depends on the use case of your application. Both scenarios have pros and cons. Going for server api calls is better if your customers/users of your website are using devices with slow internet connection. Because then your server is sending and handling a request to external api instead of your user's browser. The difference in delivery would be especially visible when you will have several requests like fetch product and fetch related products on the initial load :)
Great tutorial, combining multiple technologies as more real world scenario for an app.
I am glad you liked it!
Great course for newbies like me, thanks Jacob
I am glad that you liked it!
Great module. I'm having error though, when running in ssr mode: '[nuxt] [request error] [unhandled] [500] Cannot find module './lib/axios' '
Hey, could you please create an issue in the module repository? IT will be easier to keep track of it :) github.com/Baroshem/nuxt-medusa
Hi @jacobandrewsky, I'm having this error too
Amazing 🔥🔥
Thanks 🔥
What was the first thing I saw? Yes, the cats in the background 😁 Thank you for the module, bro. 👍
😁
Do you know how to avoid fetching again once the page has already been visited? Something like caching previous data and not fetching again...
Hey, yes. When you use the useAsyncData or useFetch it will store this result in memory so that when you are trying to fetch the data from the same place it will return a result from cache instead of fetching the data again :)
@@jacobandrewsky hi, thanks for reply. I tried but it doesn’t work… could you please do a little demo or an example? I really appreciate it so much