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 vueform from '@vueform/vueform/themes/vueform'
export default {
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')
Component logic โ
First let's import names component logic from '@vueform/vueform/core' 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/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.
// 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
:
// 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:
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
- 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