Vuetensils 0.5.0 Released!

The latest release of Vuetensils is out, and there’s a lot of great things coming with it.

• New directive: v-intersect
• New component: VTable (WIP)
• Added transition duration prop to VImg
• Better transition end handling for VImg
• Added watchers for changes to VImg src and srcset
• VIntersect render function so no extra DOM node
• Renaming VModal to VDialog for better semantics

New Directive: v-intersect

In the previous version of the project, if you wanted to track whether an element had entered or exited the viewport, you could use the VIntersect component.

<template>
  <VIntersect @change="log('@change fired for block 1')">
    <div class="intersection-content">Content block 1</div>
  </VIntersect>
</template>

<script>
export default {
  methods: {
    log: console.log,
  },
}
</script>

It worked well but also required a bit of extra markup when in some cases, you may prefer something like a Vue directive. Take for example, the new v-intersect directive in Vuetensils:

<template>
  <div v-intersect="$log"></div>
</template>

<script>
export default {
  methods: {
    log: console.log,
  },
}
</script>

That’s nice!

The v-intersect method also provides some nice modifiers to fire only when the element enters the context, fire only when it exits, and also a modifier to fire the handler only once.

New Component: VTable

It’s a pretty common need to show a big list of data in a web app. Until now, Vuetensils did not provide a very good solution. Fortunately, today there is the new component VTable.

Along with taking in data and presenting it in a table, it supports sorting by column and pagination:

<template>
  <VTable class="styled" :headers="headers" :items="people"></VTable>
</template>

<script>
export default {
  data: () => ({
    headers: [
      { key: "name" },
      { key: "age" },
      { key: "gender", sortable: false },
    ],
    people: [
      { name: "Mary", age: 33, gender: "female" },
      { name: "Bob", age: 56, gender: "male" },
      { name: "Ivana", age: 12, gender: "female" },
      { name: "Jeremy", age: 8, gender: "male" },
      { name: "Cassie", age: 45, gender: "female" },
    ],
  }),
}
</script>

Improvements & Bug Fixes

The VImg component has always been one of my favorites. It provides a drop-in replacement for the HTML <img> tag with built-in lazy loading. And although native lazy loading has landed in some browsers, VImg is still a more flexible option.

Toe make it even better, I added support for custom transition duration which you can configure with the transitionDuration prop. Another useful addition is watchers for the src and srcset props so you are free to change the image source as needed. There were also some improvements to the source code which will not be visible but do improve flexibility and performance.

The next improvements came to VIntersect. The component used to output a wrapper <div> around it’s children. Now that it uses a render function, it no longer needs to do that. Yay, no more DOM bloat. The code was also cleaned up, the docs have been expanded, and the scoped slot now has access to the IntersectionObserverEntry so you can do a bit more logic in the handler.

Lastly, the VModal component has been deprecated and replaced with VDialog for semantic reasons. VModal will still work as it did previously but will warn users to upgrade to VDialog. Nothing has changed between the two except the name.