Epicmax - We are the core team behind Vuestic UI and Vuestic Admin and frontend development company specializing in Vue.js since our founding in 2017.
🔥🔥🔥 Hire us

Tree shaking
#

If you plan to use only several components in your application and thus reduce the size of your bundle, you can use the Vuestic ESM build. Webpack (vue-cli) and Vite do that automatically.

First, you don't need to use createVuestic since it registers all the vuestic components globally. We have createVuesticEssential instead, which register only essential plugins. You can specify components to declare globally. Or you can import them later.

import { createApp } from "vue";
import {
  createVuesticEssential,
  VaButton,
  VaSelect,
  VaInput,
  VaDropdownPlugin,
} from "vuestic-ui";
import "vuestic-ui/css";
import App from "./App.vue";

createApp(App)
  .use(
    createVuesticEssential({
      components: { VaButton, VaSelect, VaInput },
      plugins: { VaDropdownPlugin },
      config: {
        /* ... */
      },
    })
  )
  .mount("#app");

You can also specify Vuestic subplugins as plugins option.

Here is a list of plugins that you can use with Vuestic:

  • GlobalConfigPlugin (essential) - used for VaConfig component and global props reassignment. Read more.
  • ColorHelpersPlugin (essential) - used to create reactive CSS variables. Requires GlobalConfigPlugin. Read more.
  • VaToastPlugin - provides methods for creating Toasts within vue context. Read more
  • VaModalPlugin - provides method for creating Modal within vue context. Read more
  • VaDropdownPlugin - provides methods for dropdown closing within vue context. VaDropdown is used in VaSelect, VaTimeInput, VaDateInput, VaButtonDropdown component.

CSS Code Split
#

We separated our CSS into modules: essential, typography, grid and reset. Instead of import vuestic/css you can import vuestic/styles/essential.css - module without typography, grid and normalize. This is usually need if you already using some CSS framework to prevent style conflicts.

// Required
import "vuestic-ui/styles/essential.css";
// Optional
import "vuestic-ui/styles/typography.css";
import "vuestic-ui/styles/smart-helpers.css";

Bundle Size
#

Statistics of the space occupied in the project bundle (without gzip):

Bundle Vuestic UI
Full ~ 947 Kb
Core + VaButton ~ 86 Kb
Core + VaButton + VaSelect ~ 310 Kb