Treeshaking #252
Usage:
BEFORE:
The old way, which still works, so nothing will break.
// still works, for backwards compatibility, but ships the whole library
import { VueUiXy } from "vue-data-ui";AFTER:
// only ships the component and its dependencies
import VueUiXy from "vue-data-ui/vue-ui-xy";In Nuxt, to declare components globally in vue-data-ui.client.ts for example:
import { defineNuxtPlugin } from '#app'
import { defineAsyncComponent } from 'vue'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component('VueUiXy', defineAsyncComponent(() => import('vue-data-ui/vue-ui-xy')))
// add only the components you actually use
})Checkout our Nuxt boilerplate to get started
⚠️ The VueDataUi universal component is not tree-shaking friendly
// Will include all components in the build, but will lazy load only the component consumed to the client (unchanged behavior)
import { VueDataUi } from "vue-data-ui";