NEW Builder
Examples
Case Studies
Docs
Resources
Ecosystem
Appearance
Star
Menu
On this page

Tree shaking ​

Reduce the bundle size by removing unused parts of Vueform.

How to tree shake ​

Tree-shaking requires importing component logic, templates and validation rules separately in vueform.config.js and our main .js file.

This is how our vueform.config.js looks by deafult (if we are using vueform theme):

js
// vueform.config.js

import vueform from '@vueform/vueform/themes/vueform'

export default {
  vueform,
}

This is how our main .js file (eg. main.js) looks like by deafult:

js
// eg. main.js

import Vueform from '@vueform/vueform'
import vueformConfig from './vueform.config'

const app = createApp(App)
app.use(Vueform, vueformConfig)
app.mount('#app')

Component logic ​

First let's import names component logic from '@vueform/vueform/core' and extend our config with it, using components prop:

js
// main.js

import Vueform, {
  // Essential form components
  FormErrors,
  FormMessages,

  // Essential element components
  ElementLayout,
  ElementLayoutInline,
  ElementLoader,
  ElementLabelFloating,
  ElementLabel,
  ElementInfo,
  ElementDescription,
  ElementError,
  ElementMessage,
  ElementText,
  ElementAddon,

  // Optional form components
  FormLanguages,
  FormLanguage,
  FormTabs,
  FormTab,
  FormSteps,
  FormStepsControls,
  FormStepsControl,
  FormStep,

  // Elements
  ButtonElement,
  CheckboxElement,
  CheckboxgroupElement,
  DateElement,
  DatesElement,
  FileElement,
  GroupElement,
  HiddenElement,
  ListElement,
  LocationElement,
  MultifileElement,
  MultiselectElement,
  ObjectElement,
  RadioElement,
  RadiogroupElement,
  SelectElement,
  SliderElement,
  StaticElement,
  TagsElement,
  TextareaElement,
  TextElement,
  ToggleElement,
  EditorElement,
  TTextareaElement,
  TTextElement,
  TEditorElement,

  // Element partials & wrappers
  DragAndDrop,
  CheckboxgroupCheckbox,
  RadiogroupRadio,
  FilePreview,
  DatepickerWrapper,
  EditorWrapper,
} from '@vueform/vueform/core'
import vueformConfig from './vueform.config'

const app = createApp(App)
app.use(Vueform, {
  ...vueformConfig,
  components: {
    // [INSERT COMPONENTS HERE]
  }
})
app.mount('#app')

The Vueform and FormElements components are automatically included in our bundle, so we don't need to import them separately.

Templates ​

The next step is to import the component templates from our theme to match the components we imported in our main .js file.

Here, we need to import Vueform and FormElements as well.

js
// vueform.config.js

import {
  // Mandatory form components
  Vueform,
  FormElements,
  
  // Essential form components (optional)
  FormErrors,
  FormMessages,

  // Essential element components (optional)
  ElementLayout,
  ElementLayoutInline,
  ElementLoader,
  ElementLabelFloating,
  ElementLabel,
  ElementInfo,
  ElementDescription,
  ElementError,
  ElementMessage,
  ElementText,
  ElementAddon,

  // Optional form components (optional)
  FormLanguages,
  FormLanguage,
  FormTabs,
  FormTab,
  FormSteps,
  FormStepsControls,
  FormStepsControl,
  FormStep,

  // Elements (optional)
  ButtonElement,
  CheckboxElement,
  CheckboxgroupElement,
  DateElement,
  DatesElement,
  FileElement,
  GroupElement,
  HiddenElement,
  ListElement,
  LocationElement,
  MultifileElement,
  MultiselectElement,
  ObjectElement,
  RadioElement,
  RadiogroupElement,
  SelectElement,
  SliderElement,
  StaticElement,
  TagsElement,
  TextareaElement,
  TextElement,
  ToggleElement,
  EditorElement,
  TTextareaElement,
  TTextElement,
  TEditorElement,

  // Element partials & wrappers (optional)
  DragAndDrop,
  CheckboxgroupCheckbox,
  RadiogroupRadio,
  FilePreview,
  DatepickerWrapper,
  EditorWrapper,

  // Alternative views (optional)
  CheckboxgroupCheckbox_tabs,
  CheckboxgroupCheckbox_blocks,
  FilePreview_image,
  FilePreview_gallery,
  RadiogroupRadio_tabs,
  RadiogroupRadio_blocks,
  
  // Mandatory imports (optional)
  classes,
  columns,
} from '@vueform/vueform/themes/vueform'

// create our own theme
const vueform = {
  templates: {
    // [INSERT COMPONENTS HERE]
  },

  // Include these
  classes,
  columns,
}

export default {
  themes: {
    vueform,
  },
  // ...
}

Validation rules ​

Next we will add required validation rules manually to vueform.config.js:

js
// vueform.config.js

import {
  accepted,
  active_url,
  after,
  after_or_equal,
  alpha,
  alpha_dash,
  alpha_num,
  array,
  before,
  before_or_equal,
  between,
  boolean,
  confirmed,
  date,
  date_equals,
  date_format,
  different,
  digits,
  digits_between,
  dimensions,
  distinct,
  email,
  exists,
  file,
  filled,
  gt,
  gte,
  image,
  in_,
  in_array,
  integer,
  ip,
  ipv4,
  ipv6,
  json,
  lt,
  lte,
  max,
  mimes,
  mimetypes,
  min,
  not_in,
  not_regex,
  nullable,
  numeric,
  regex,
  required,
  same,
  size,
  string,
  timezone,
  unique,
  url,
  uuid,
} from '@vueform/vueform/core'

export default {
  rules: {
    // [INSERT RULES HERE]
  },
  // ...
}

IMPORTANT: the in rule is imported as in_, so it must be passed to rules as:

js
rules: {
  in: in_,
}

Other replacements ​

Check your project if you're importing @vueform/vueform anywhere else and change them to @vueform/vueform/core to avoid accidentally import the full bundle too.

Benchmark ​

Last tested on 2023-11-13 with version 1.5.7 in Vite 3.1.3. Gzipped sizes.

BundleJSCSS
Default components + all services91.88 kB8.75 kB
+ native HTML elements+12.42 kB+0.02 kB
+ default elements+27.41 kB+3.83 kB
+ validation rules+12.23 kB+0 kB
+ advanced components+5.25 kB+1.29 kB
+ all other elements + views (full build)+92.76 kB+17.89 kB

Reference ​

Default components ​
  • Vueform
  • FormElements
  • FormErrors
  • FormMessages
  • ElementLayout
  • ElementLayoutInline
  • ElementLoader
  • ElementLabelFloating
  • ElementLabel
  • ElementInfo
  • ElementDescription
  • ElementError
  • ElementMessage
  • ElementText
  • ElementAddon
Advanced components ​
  • FormLanguages
  • FormLanguage
  • FormTabs
  • FormTab
  • FormSteps
  • FormStepsControls
  • FormStepsControl
  • FormStep
Native HTML elements ​
  • ButtonElement
  • CheckboxgroupElement
  • HiddenElement
  • RadiogroupElement
  • TextareaElement
  • TextElement
Default elements (including native HTML) ​
  • ButtonElement
  • CheckboxgroupElement
  • FileElement
  • HiddenElement
  • MultiselectElement
  • RadiogroupElement
  • SelectElement
  • TagsElement
  • TextareaElement
  • TextElement
  • CheckboxgroupCheckbox
  • RadiogroupRadio
All elements ​
  • ButtonElement
  • CheckboxElement
  • CheckboxgroupElement
  • DateElement
  • DatesElement
  • FileElement
  • GroupElement
  • HiddenElement
  • ListElement
  • LocationElement
  • MultifileElement
  • MultiselectElement
  • ObjectElement
  • RadioElement
  • RadiogroupElement
  • SelectElement
  • SliderElement
  • StaticElement
  • TagsElement
  • TextareaElement
  • TextElement
  • ToggleElement
  • EditorElement
  • TTextareaElement
  • TTextElement
  • TEditorElement
Validation rules ​
  • accepted
  • active_url
  • after
  • after_or_equal
  • alpha
  • alpha_dash
  • alpha_num
  • array
  • before
  • before_or_equal
  • between
  • boolean
  • confirmed
  • date
  • date_equals
  • date_format
  • different
  • digits
  • digits_between
  • dimensions
  • distinct
  • email
  • exists
  • file
  • filled
  • gt
  • gte
  • image
  • in_
  • in_array
  • integer
  • ip
  • ipv4
  • ipv6
  • json
  • lt
  • lte
  • max
  • mimes
  • mimetypes
  • min
  • not_in
  • not_regex
  • nullable
  • numeric
  • regex
  • required
  • same
  • size
  • string
  • timezone
  • unique
  • url
  • uuid
Creating Elements 
👋 Hire Vueform team for form customizations and developmentLearn more