🆕 New Features in Vuestic 1.10

Input Mask: Customizable & Flexible

With Vuestic 1.10, we've introduced a new composable for building custom input masks. The useInputMask composable is a versatile solution that works with any HTML input element or vue component, including VaInput, VaDateInput, and more. The mask is based on regex syntax, allowing you to easily define the format you need.

Here’s an example:


```js

const phone = createRegexMask(/(+\d{1,3})? \d\d\d-\d\d-\d\d/)

// This mask will accept two phone formats. In traditional method it is:

// +### ###-##-## or ###-##-## where # is a number

// Notice that country code can be #, ## or ### and it is not required because of ?

const myPhoneInput = ref()

useInputMask(phone, myPhoneInput)

```

‍

We’ve also included built-in mask presets, such as createDateMask and createNumeralMask, which you can explore further in our updated documentation.

‍

Sticky Table Headers: Better UX for Large Tables

Handling large data tables just got easier with the introduction of sticky table headers. The useStickyTableHeader composable creates a copy of the thead and keeps it visible as a fixed element when you scroll through long tables. This feature works with any HTML table or vue component, including VaDataTable.

All you need to do is pass your table element to useStickyTableHeader, and you're good to go!

Sticky Scrollbars: Improve Visibility and UX

When working with large scroll containers or tables, it’s easy to lose important columns or sections as users scroll. Vuestic 1.10 introduces the "sticky scrollbar" feature, which ensures that scrollbars remain visible even when they're outside the window bounds. This improvement helps users stay oriented and improves overall user experience.

⚙️ Performance & Optimization

Bundle Size Reductions

Performance matters, and we've made significant strides in reducing the bundle size in Vuestic 1.10. By reducing external dependencies, we've achieved impressive reductions:

Core Build + Button: Reduced by 50% (from 173kb to 86kb).
Full Build: Reduced by 14% (from 1084kb to 946kb).

This means your applications will load faster and run more efficiently, using only the features you need.

‍

‍

Introducing the Vuestic Compiler: Performance & Developer Experience

As we continue to add more features and composables to Vuestic, we recognize the need to optimize the development process and prevent runtime overhead. That’s why we’re introducing the Vuestic compiler. This new tool is designed to enhance performance during build time, reducing complexity without sacrificing the developer experience.

Here’s additional features you can play with right now:

Automatic Configuration: The compiler detects your vuestic.config.ts and sets up createVuestic in your main.ts. (Manual configuration is also supported, of course.)
CSS Layer Integration: If you're using Tailwind or UnoCSS, the compiler ensures that Vuestic styles are less important than your CSS framework. This solves a common issue where multiple stylesheets clash in production, causing layout inconsistencies.
Visual DevTools: Vuestic now includes new devtools that allow you to visually edit your application without needing to write a single line of code.

Looking Ahead: More Compiler Optimizations

In the future, we plan to move more components into the Vuestic compiler, further optimizing performance without negatively impacting the developer experience. Stay tuned for updates as we continue refining and improving Vuestic UI!

With these new features and optimizations, Vuestic 1.10 offers better flexibility, performance, and usability, whether you're working with large tables, complex input fields, or modern CSS frameworks. We're excited to see what you build with these new tools and can't wait to continue improving your developer experience.

For more details, check out our updated documentation and get started with Vuestic 1.10 today!

‍

🔥 2 Vue.js experts available to build and launch your product.

Vuestic UI 1.10 Release: New Features and Optimizations

Today, we’ve released a new version of Vuestic UI. You can find the repository here: https://github.com/epicmaxco/vuestic-ui ⭐️⭐️⭐️ If you're using Vuestic, please give us a star and share the news on your social media so more people can learn about Vuestic!