Apologies for the title. It’s groan worthy and, I assume, has been done many times before but once it was in my head I couldn’t get it out. As penance, please accept the Vue Inner Image Zoom open source component.

I spend most of my time writing React so I thought it might be fun to give Vue.js a try. As a starter project, I decided to rewrite the React Inner Image Zoom component and accompanying demo pages using Vue. All of the functionality is the same, zoom with drag to explore on mobile and dragging or hover panning on desktop. Optional fullscreen on mobile and responsive image support. Since Vue isn’t my first language, if you use it and notice any egregious best practices missteps please let me know.

Installation details are available at NPM or Github. Demos are here.

And if you’re wondering what I thought of Vue, here are a few observations:

• It’s pretty easy to learn the basics. The new syntax took a little getting used to but it didn’t take too long to port over a component.
• I really like Vue CLI and how easy it is to customize things like linting and testing.
• One thing I missed was built in portal support (but it sounds like that might be included in the next version!).
• For some reason my biggest sticking point was figuring out how to render code snippets as strings. It turned out to be fairly simple but it took me forever to even Google the right terms.