Your Trusted Vue.js Experts
Vuestic UI 1.10 Release: New Features and Optimizations
We're excited to announce the release of
Vuestic UI 1.10!
Vuestic UI 1.10!
This update brings a range of new features, optimizations, and improvements to enhance your development workflow and deliver better performance for your applications. In this blog post, we'll dive into the key highlights of this release, including input masks, sticky table headers, sticky scrollbars, bundle size reductions, and the introduction of the Vuestic compiler. Let's take a closer look at each of these exciting updates.
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!
🆕 New Features in Vuestic 1.10Input 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.
⭐️⭐️⭐️ 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!
🆕 New Features in Vuestic 1.10Input 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:
<div class="text-code">
<code class='code'>
```js<br />
const phone = createRegexMask(/(+\d{1,3})? \d\d\d-\d\d-\d\d/)<br />
// This mask will accept two phone formats. In traditional method it is:<br />
// +### ###-##-## or ###-##-## where # is a number<br />
// Notice that country code can be #, ## or ### and it is not required because of ?<br />
const myPhoneInput = ref()<br />
useInputMask(phone, myPhoneInput)<br />
```<br />
</code>
</div>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 & OptimizationBundle 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:
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 & OptimizationBundle 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).
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:
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!
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!
Be the first to know our news!
Once a month, get the latest updates on our new features, open-source projects, and key releases. No spam—just valuable insights for Vue.js developers.