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):

// vueform.config.js

import { defineConfig } from '@vueform/vueform'
import vueform from '@vueform/vueform/dist/vueform'

export default defineConfig({
  theme: vueform,
  // ...
})

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

// eg. main.js

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

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

Install Dependencies

First, we have to install a couple of Vueform's dependencies, that will be required to build from source:

npmyarnpnpmbun

bash

npm install autosize flatpickr locutus lodash sortablejs

bash

yarn add autosize flatpickr locutus lodash sortablejs

bash

pnpm add autosize flatpickr locutus lodash sortablejs

bash

bun install autosize flatpickr locutus lodash sortablejs

Add Vite Plugin

If you are using Vite or Vite based framework (like Nuxt), add Vueform's vite plugin:

Vite

// vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueform from '@vueform/vueform/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueform(),
  ],
})

Nuxt

// nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'
import vueform from '@vueform/vueform/vite'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  vite: {
    plugins: [
      vueform()
    ]
  }
})

Component Logic

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

// 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/src/core.js'

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.

// vueform.config.js

import { defineConfig } from '@vueform/vueform/src/core.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)
  CheckboxgroupElement_tabs,
  CheckboxgroupElement_blocks,
  CheckboxgroupCheckbox_tabs,
  CheckboxgroupCheckbox_blocks,
  FilePreview_image,
  FilePreview_gallery,
  RadiogroupRadio_tabs,
  RadiogroupRadio_blocks,
  RadiogroupElement_tabs,
  RadiogroupElement_blocks,
  
  // Mandatory imports
  classes,
  columns,
} from '@vueform/vueform/themes/vueform'

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

  // Include these
  classes,
  columns,
}

export default defineConfig({
  theme: vueform,
  // ...
})

Validation rules

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

// vueform.config.js

import { defineConfig } from '@vueform/vueform'

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/src/core.js'

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

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

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.

Bundle	JS	CSS
Default components + all services	91.88 kB	8.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

Tree shaking ​

How to Tree Shake ​

Install Dependencies ​

Add Vite Plugin ​

Vite ​

Nuxt ​

Component Logic ​

Templates ​

Validation rules ​

Other replacements ​

Benchmark ​

Reference ​

Default components ​

Advanced components ​

Native HTML elements ​

Default elements (including native HTML) ​

All elements ​

Validation rules ​

Tree shaking

How to Tree Shake

Install Dependencies

Add Vite Plugin

Vite

Nuxt

Component Logic

Templates

Validation rules

Other replacements

Benchmark

Reference

Default components

Advanced components

Native HTML elements

Default elements (including native HTML)

All elements

Validation rules