feat: Implement nuxt image #1255
Conversation
- Introduced `isNuxtImageEnabled` option in Sanity module options to track if @nuxt/image is enabled. - Updated the Sanity public runtime config to include the new option. - Enhanced the `sanity-image` component to conditionally render using NuxtImg when @nuxt/image is enabled.
✅ Deploy Preview for nuxt-sanity-module ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
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 |
|
awaiting updating the docs for this until the new docs get merged |
|
@isakgustavsen Dude Isak, you're the man! |
|
Unsure if this is a good way to handle this @danielroe but come with feedback and i'll update as needed |
|
might be worth checking how it's done here: (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.) |
danielroe
left a comment
danielroe
left a comment
There was a problem hiding this comment.
What if we also, in <SanityContent>, automatically add <NuxtImg> as a custom component with the sanity provider to render images in portable text? And we can probably also configure the sanity provider in Nuxt image automatically so the user doesn't have to do so separately.
what do you think?
|
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 |
|
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. |
|
This should probably only be for the images added inline in the editor so you can use the component as normal |
|
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 ? |
|
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. |
|
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 |
|
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 |
commit: |
| if (typeof ImageComponent !== 'string') { | ||
| return h(ImageComponent, { | ||
| provider: 'sanity', | ||
| ...attrs, | ||
| ...nuxtImgOptions.value, | ||
| src: props.assetId, | ||
| }) | ||
| } |
There was a problem hiding this comment.
this operates at runtime, meaning (I think) we aren't able to tree-shake this out.
instead, I think we can split this into two separate files, and pick which one to add within the module
| }, | ||
| async setup(options, nuxt) { | ||
| if (hasNuxtModule('@nuxt/image', nuxt)) { | ||
| (options as SanityModuleOptions).isNuxtImageEnabled = true |
There was a problem hiding this comment.
let's not set this on the options, but just use a let isNuxtImageEnabled = false
we also shouldn't detect this based on the presence of the module, but instead by doing something like this, as we do below in L372+:
3 participants
🔗 Linked issue
Resolves #162
Resolves #400
❓ Type of change
📚 Description
This enhances the
SanityImagecomponent by integrating it with@nuxt/image.When the
@nuxt/imagemodule 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.