Image Optimization with Nuxt Image + Storyblok
HTML-код
- Опубликовано: 28 авг 2024
- CHECKOUT STORYBLOK'S IMAGE SERVICE + CMS go.learnvue.co...
RESOURCES
Nuxt Image Edge Release Docs - v1.image.nuxtj...
Storyblok + Nuxt Intro - • How I Use Nuxt + Story...
✅ Join the LearnVue+ Waiting List - learnvue.co
Get early access to videos, exclusive content, interactive code challenges, and more.
follow me on twitter:
/ mattmaribojoc
MUSIC
Lukrembo - Boba Tea • lukrembo - boba tea (r...
#vuejs #vue #javascript #webdev
So useful nuxt just gets better every single version and storyblok looks good too
Love your videos. Do you have any plans on doing project videos? I've realised RUclips doesn't have much project videos using Vue
A really fantastic tool with a storyblok image server under the hood.
Using Nuxt Content + Nuxt Image + Cloudflakre pages, no need to store your images elsewhere, just in your public folder. CF pages will do the CDN for you.
i am using nuxt.js version 2, does this work in this version?
Sorry for asking a stupid question. But how would you use NuxtImage for Articles? Images in a Richtextfield for example.
Salamat Matt!
can you use nuxt-img for background images ?
Please create more contents.. practice projects
Great video keep up the great work
Awesome 👏🏻
🙌
bro why after install this module my nuxt 3 so lag? 10x restart (npm run dev) still not work. After uninstall this module lag is gone, why? is bug?
my module in nuxt 3
- tailwind
- google font
👌👌👌
Is there some similar package for vue?
Not that I know of, but with Storyblok's Image Service - you could always specify a lot of the options (like size, filters, format) directly in the URL.
@@LearnVue sounds great, I was using supabase buckets to store images uploaded by users, i'll give Storyblok a try then, thanks!
Also, I had a look if supabase supported image transforms and it looks like it's an incoming feature :)
@@LearnVueDo you know the best way to handle full screen background images with ability to transform and crop vertically to optimize for device? )Not sure if it's user agent or screen size or what's used)
I'd like to get the most optimal bg images not sure if nuxt-img can be set up like that to essentially srcset?
(Not sure if there is an easy way passing something as variable or whatever, brand new to js and Vue. )
I'm wanting to learn this, to have the option for an additional alternately composed shot (alt art directed for vertical image) not just setting parameters for ai crop and focus on a single shot.
(I've heard of conditional rendering of components for mobile desktop etc) (based on detection ) and not sure if that's a realistic way to begin, or if that's sorta what the special component does already when the css breakpoints are defining it? Obviously want the least overhead on each route.
Thanks I appreciate it, I'm so new I don't know how to articulate the question or know the terms by which to search them, and stuff seems dated and I definitely want to get this sorted before adding parallax or any event listeners on top. Subbing and checking out the rest of your content thanks for sharing
Nuxt projects
👍