Vue3

Inside your <template>, you may be used to stacking lots of conditionally applied classes onto elements. You can add dynamic classes (e.g. .btn--${props.type}), arrays of conditional if/else classes (e.g. props.error ? 'has-error' : 'is-valid') or even whole objects of conditionals (e.g. { 'is-disabled': props.disabled }. But what do we do…

Install the package with one of the following: // NPMnpm i vue3-auto-vite-components // Yarnyarn add vue3-auto-vite-components While standard auto-import loaders use the build process (i.e. a plugin for Vite or Webpack) to automatically import/register your components, this package takes a slightly different tack and instead uses built-in Vue and Vite…

If you’re keeping your Vue component sizes small, there’s a good chance you’ll need to implement a wrapper component at some point. If you’re only utilising the default slot for these, it can be as simple as putting a <slot /> tag inside your wrapper component. However, there’s a bit…

Back in the days of Vue 2, the mixin was king. Had some code you wanted to reuse in separate components? Create a mixin, import and register it in the component and its provided props, data and methods would magically be available. The problem with mixins was that magic. You’d…

Developing a large web application is a constant struggle to not keep writing the same things over and and over again. Part of this can be the need to continually import your components within a Vue application. While there are some great tools to help automatically register all of your…