Vuetensils 0.10: Updated Tech, Better Forms, And More

I’ve recently published the latest version of Vuetensils and wanted to take some time to share some of the features I’m most excited about.

Vue 3 & Vite

Great news for anyone working with new or newly upgraded projects. Vuetensils now works with Vue 3. We’re leveraging vue-demi to do a little bit of magic to check whether the current running version is Vue 2 or 3.

Unfortunately, this did mean adding my first dependency to the project, but it allows for supporting the most people without having to maintain two projects. This makes it much easier to keep pushing out new features to everyone, not just the folks on Vue 3.

In addition to supporting Vue 3, I also fixed a couple of the blockers in the way of supporting Vite. Vite is an awesome tool that I’ve been developing with (I’m even working on a plugin called Particles CSS), so it’s great to maintain

VInput Improvements

This is probably my favorite new feature. VInput has always supported some validation error logic for classes and state, but I’ve been working on API design for generating validation error messages as well.

Many other libraries do this for you and just decide what the error messages are. That was a bit too much of a design responsibility for this library but I came up with a solution I’m quite happy with.

You can now provide VInput with an errors object and map the appropriate error message to the corresponding validation attribute.

It looks like this:

<template>
  <VInput
    label="Pick a number between 1 and 10"
    name="one-to-ten"
    type="number"
    required
    min="1"
    max="10"
    :errors="{
      required: 'This field is required',
      min: (n) => `Must be greater than ${n}`,
      max: (n) => `Must be less than ${n}`,
    }"
  >
  </VInput>
</template>

You can provide a string for the error message to show, or a function that returns a string. The function is provided with the value of the corresponding attribute.

You can read more about this at vuetensils.austingil.com/components/Input.html#validation

In addition to this validation improvement, I also discovered a bug in my original validation logic that has now been fixed. I’m guessing no one had run into that bug yet.

VForm Improvements

A while back, I wrote a blog post called “How to prevent browser refresh, URL changes, or route navigation in Vue“. It’s my most popular post, which makes me feel a little bit embarrassed to realize how long it took for me to add this feature to Vuetensils.

The good news is that today you can have that logic built right into your forms without lifting a finger.

VForm now accepts a preventNavigation prop as a Boolean which will watch your form for any changes. If there are changes made to any of the inputs, the browser will notify the user before leaving unless the form has been submitted.

You can read more about it, or give it a test here: vuetensils.austingil.com/components/Form.html#preventing-navigation

Another convenience that was added to VForm is the valid and invalid custom events. These work very similar to the default submit event, but they only run when the form is either valid, or invalid (as the names suggest).

<template>
  <VForm @valid="onValid" @invalid="onInvalid" novalidate>
    <label>
      Name:
      <input name="name" required />
    </label>

    <button type="submit">
      Submit
    </button>
  </VForm>
</template>

<script>
export default {
  methods: {
    onValid(event) {
      event.preventDefault()
      console.log('Everything looks good', event)
    },
    onInvalid(event) {
      event.preventDefault()
      console.log('Please fix the errors and try again', event)
    },
  }
}
</script>

The idea here is to reduce some of the logic your applications will probably have whenever a form is submitted, and to compartmentalize the functionality.

You can read more about these events here: https://vuetensils.austingil.com/components/Form.html#valid-and-invalid-events

VTabs Rewrite

My first take at the VTabs component was ok, but not great. There wasn’t a great option to customize the tab content.

In this new version, I’m much happier with how the tabs are created. It’s all based on custom slot names for the tab and panel.

It looks like this:

<template>
  <VTabs>
    <template #tab-1>Tab 1</template>
    <template #panel-1>
      Here's the content for tabpanel 1.
    </template>

    <template #tab-2>Tab 2</template>
    <template #panel-2>
      Here's the content for tabpanel 2.
    </template>

    <template #tab-3>Tab 3</template>
    <template #panel-3>
      Here's the content for tabpanel 3.
    </template>
  </VTabs>
</template>

The only requirement is that your tab names are prefixed with tab- and panel names are prefixed with panel-. The tabs and panels are connected by sharing the same suffix.

This makes for a pretty simple learning curve, with a lot of flexibility.

VDate i18n

Thanks to some work by Benjamin Courtel, there was a small PR to improve internationalization support in the VDate component. You can now provide custom labels for the navigation buttons.

Thank you so much for reading. If you liked this article, please share it, and if you want to know when I publish more articles, sign up for my newsletter or follow me on Twitter. Cheers!

Originally published on austingil.com.