Posts tagged vue

March 25, 2025

I swear I didn't abandon my open source projects

It's been a while but I finally published an update to the Vue Inner Image Zoom package. Version 3.0.0 adds an imgAttributes prop and removes srcSet, sizes, alt, and title since those are all image attributes. I also added type definitions and a CHANGELOG.

In addition, I released a Vanilla JS package called Inner Image Zoom with the same functionality but framework agnostic. A new demo site for Vue and Vanilla JS is up here. This is all part of a larger migration to get all versions into one monorepo so it's easier for me to keep track of and to share utilities. The next step is to move over React Inner Image Zoom and then maybe branch out to other frameworks like Angular or Svelte.

If you run into any issues, please let me know.

December 3, 2021

Vue Inner Image Zoom v2

As promised, now that migrating is easier I’ve updated my Vue Inner Image Zoom component to support Vue 3. If you’re still on Vue 2 and want to use the component, just make sure to install it as vue-inner-image-zoom@1.1.1.

I also updated the demos site to remove the lazy loading example since vue-lazyload isn’t compatible with Vue 3 (I’m open to any suggestions for replacements) and switched from vue-slick-carousel to Swiper both for compatibility and because it’s my preferred carousel library.

If I broke anything and you run into any new bugs, please report them on the GitHub issues page.

November 30, 2021

Vue 3.1 - Official Migration Build from Vue 2 to 3 - This Dot Labs

Introduction A few weeks ago, the Vue core team released the first minor version of Vue 3 (release notes here). This latest release of Vue brought a number of…...

When Vue 3 was initially released, I tried to muddle through upgrading from Vue 2 but couldn’t really tell if I was doing it right and eventually put it aside. But the new migration build released with v3.1 changed all that and this overview from This Dot Labs is great.

The only things I would add to their comprehensive guide are: 1) if you’re using ESLint you may need to update your eslint-plugin-vue version and config and 2) if you’re using Jest for tests this Stack Overflow answer might be helpful.

Keep an eye out for Vue 3 support for the Vue Inner Image Zoom component!

August 14, 2020

Getting to know Vue (with a new image zoom component you can use)

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.