feat: Implement nuxt image

[isakgustavsen]

🔗 Linked issue

Resolves #162 Resolves #400

❓ Type of change

• [x] 📖 Documentation (updates to the documentation or readme)
• [ ] 🐞 Bug fix (a non-breaking change that fixes an issue)
• [ ] 👌 Enhancement (improving an existing functionality)
• [x] ✨ New feature (a non-breaking change that adds functionality)
• [ ] 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• [ ] ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This enhances the SanityImage component by integrating it with @nuxt/image.

When the @nuxt/image module is installed, it is automatically used for rendering, enabling image optimizations. If the module is not installed, the component gracefully falls back to using a standard <img> tag.

[netlify[bot]]

✅ Deploy Preview for nuxt-sanity-module ready!

Name	Link
🔨 Latest commit	0f7835a429d358224e675305530553b9719bb004
🔍 Latest deploy log	https://app.netlify.com/projects/nuxt-sanity-module/deploys/68e8fdfcd58b7b00086e1a7c
😎 Deploy Preview	https://deploy-preview-1255--nuxt-sanity-module.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[isakgustavsen]

Im having an issue where the playground doesn't like import('#compnents') so I can't test the functionality to fail silently, but it works without it. It can be removed but would nicer to keep it. Provider has to be set to Sanity in the config for Nuxt Image but I'm sure there is a way hard code it into the sanity image component that I couldn't figure out

[isakgustavsen]

awaiting updating the docs for this until the new docs get merged

[rylanharper]

@isakgustavsen Dude Isak, you're the man!

[isakgustavsen]

Unsure if this is a good way to handle this @danielroe but come with feedback and i'll update as needed

[danielroe]

might be worth checking how it's done here:

https://github.com/nuxt-modules/mdc/blob/a69242835d10733cfa8a9149dd74c47ea75b92df/src/module.ts#L181-L189

(I wouldn't do it exactly this way but we can probably do it at build time rather than adding it to the runtime component.)

[isakgustavsen]

I think it would be a welcome improvement,. Should it be added only if Nuxt Image is installed or should be do it with a standard image tag too?

On the point of adding as a provider I couldn't get that working, but it would be good

[rylanharper]

Random side note, when Nuxt Image v2 releases, I plan on using both the new Shopify provider and Sanity provider together. This is a good idea, but there are some minor use-cases where people may need to use two providers.

As long as some devs can still download the Nuxt Image module and add the custom config options they need (even if sanity is one of them) I dont see an issue. Personally, even if Nuxt Image is a part of this module package, I'll still probably download Nuxt Image and add it to my nuxt config modules with specific options.

[isakgustavsen]

This should probably only be for the images added inline in the editor so you can use the <NuxtImg> component as normal

[isakgustavsen]

It may be worth it to just add Nuxt image as a dependency and make this the default behavior. Are there any major downsides to this @danielroe ?

[danielroe]

I'd prefer not to add it as a dependency.

configuring sanity options for Nuxt Image won't make it the default provider, so it should be safe for the end user, and if we can add an automatic component for images (assuming the user hasn't provided one) that would be amazing.

[isakgustavsen]

Content component now renders images automatically. Im not sure if we want this to only be if Nuxt Image is installed, but there is a flag for it created at build time so it's easy to do so

[isakgustavsen]

Im unsure if the right approach is to use crop and hotspot if it's passed, so to avoid confusion this strips it of those two. All other props defined in the image block will be passed on

[pkg-pr-new[bot]]

Open in StackBlitz

npm i https://pkg.pr.new/@nuxtjs/sanity@1255

commit: 0f7835a