Popular Vuetensils Features to Utilize

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

Show 3 and fast

Good news for anyone working with new or newly developed projects: Vuetensils now works with Vue 3. We’re taking advantage of vue-demi To do some magic to check if the current version is Vue 2 or 3.

Unfortunately, this means adding my first dependency to the project, but it allows most people to be supported without having to maintain two projects. This makes it very easy to keep pushing new features for everyone, not just people in Vue 3.

In addition to Vue 3 support, I also fixed a couple of blocking tools in the Vite support method. Vite is a great tool I’ve been developing (I’m even working on a plugin called Particles CSS), so it’s great to keep

VInput improvements

This is probably my favorite new feature. VInput always supported some validation error logic for classes and states, but I’ve been working on designing an API to generate validation error messages as well.

Many other libraries do this for you and decide what the error messages are. This was a very big design responsibility for this library, but I came up with a solution that I am very happy with.

You can now provide VInput with an extension errors object and assign 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 appear, or a function that returns a string. The function is provided with the corresponding attribute value.

In addition to this validation improvement, I also discovered a bug in my original validation logic which is now fixed. I guess no one has encountered this error yet.

VForm improvements

VForm now accepts a file preventNavigation pillar as a Boolean which will monitor your form for any changes. If there are changes made to any of the entries, the browser will notify the user before leaving unless the form is submitted.

Another convenience that has been added to VForm is valid And invalid Custom events. This works very similarly to the default mode submit event, but it only works when the form is 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 that your applications are likely to have whenever a model is introduced and the splitting of functions is done.

Rewrite VTabs

My first take on the VTabs component was fine, but it wasn’t great. There was no great option to customize the content of the tab.

In this new version, I’m much happier with how the tabs are created. It all depends on the names of the slots assigned to 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 the tab names must be prefixed with tab- The names of the plates are prefixed with . panel-. Tabs and panels are connected by sharing the same suffix.

This makes the learning curve very simple, with a lot of flexibility.

VDate i18n

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

Typescript

TypeScript support was already partially present in the previous version, but not in a way that would help anyone. No type definitions were created for the components. This was overlooked.

Now that some new tools have been deployed and I have time, Vuetensils components are shipped with type definition files thanks vue-typegen by Zhao clouds.

This would make the consumption of the library much better.

Documentation and dependencies

I noticed that some of my builds were hacking into the documentation site, so I had to dig around and update the dependencies and squashed some bugs.

In the end, I found the core issue and made a generic file. This should be mostly important to the people who contribute to the project, as the documents also serve as a development environment.

.

Leave a Comment