You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
VueTypes has a global configuration object that can be used to customize the library's behavior.
7
8
8
-
The configuration is exposed both as a property of the default export, and as a named export:
9
-
10
-
::: tabs
9
+
The configuration is exposed both as a property of the default export and as a named export:
11
10
12
-
== Named export
11
+
<CodeExample>
13
12
14
13
```js
15
14
import { config } from'vue-types'
16
15
17
16
VueTypes.config=== config
18
17
```
19
18
20
-
== Default export
19
+
---
21
20
22
-
```js{sss.js}
21
+
```js
23
22
importVueTypesfrom'vue-types'
24
23
25
24
VueTypes.config=== config
26
25
```
27
26
28
-
:::
27
+
</CodeExample>
29
28
30
29
## Configuration Options
31
30
32
-
-`silent`: (boolean, default `false`) set to `true` to prevent VueTypes from logging validation warnings.
31
+
-`silent`: (boolean, default `false`) Set to `true` to prevent VueTypes from logging validation warnings.
33
32
34
-
-`logLevel`: (string, default `warn`) allows choosing which console method will be used to display validation errors. Available options are `log`, `warn`, `error`, `debug` and`info`.
33
+
-`logLevel`: (string, default `warn`) Allows choosing which console method will be used to display validation errors. Available options are `log`, `warn`, `error`, `debug`, and`info`.
Vue.js does not validate components' props when used in a production build. Using a bundler such as Webpack or Rollup, you can shrink VueTypes file size by around**70%** (minified and gzipped) by removing the validation logic while preserving the library's API methods. VueTypes ships with a `vue-types/shim` module that can be used as an alias in production builds to achieve that result.
56
+
Vue.js does not validate component props in production builds. By using a bundler such as Webpack or Rollup, you can reduce the VueTypes file size by approximately**70%** (minified and gzipped) by removing validation logic while preserving the library's API methods. VueTypes provides a `vue-types/shim` module that can be used as an alias in production builds to achieve this optimization.
56
57
57
58
::: danger NOTE
58
-
Note that all validation functions in the shim version (including `validateType` and `VueTypes.utils.validate`) always return `true`.
59
+
In the shim version, all validation functions (including `validateType` and `VueTypes.utils.validate`) always return `true`.
59
60
:::
60
61
61
-
By just aliasing `vue-types` to `vue-types/shim`, bundlers should be able to pick the module type that fits your configuration (ES, CommonJS, ...).
62
-
63
-
See below for common configuration scenarios.
62
+
By aliasing `vue-types` to `vue-types/shim`, bundlers will automatically select the appropriate module type (ES, CommonJS, etc.) based on your configuration.
64
63
65
-
::: details More details
64
+
### Common Configuration Scenarios
66
65
67
-
Here is a table showing the full and shim versions of the library for each module system.
66
+
The following table displays the full and shim versions of the library for different module systems:
68
67
69
-
| Module system| Full Library entry point| Shim entry point|
68
+
| Module System| Full Library Entry Point| Shim Entry Point|
You can use the [conditional config](https://vitejs.dev/config/#conditional-config) feature to set a production-only [alias](https://vitejs.dev/config/#resolve-alias):
84
+
Use [conditional config](https://vitejs.dev/config/#conditional-config) to set a production-only [alias](https://vitejs.dev/config/#resolve-alias):
The following example will shim the module in Webpack by adding an [alias field](https://webpack.js.org/configuration/resolve/#resolve-alias) to the configuration when `NODE_ENV` is set to `"production"`:
105
+
To use the shim in Webpack, add an [alias field](https://webpack.js.org/configuration/resolve/#resolve-alias) to the configuration when `NODE_ENV` is set to `"production"`:
109
106
110
107
```js
111
108
// webpack.config.js
112
109
113
110
return {
114
-
//... configuration
111
+
//Other configuration settings
115
112
resolve: {
116
113
alias: {
117
-
//... other aliases
114
+
//Other aliases
118
115
...(process.env.NODE_ENV==='production'&& {
119
116
'vue-types':'vue-types/shim',
120
117
}),
@@ -123,35 +120,34 @@ return {
123
120
}
124
121
```
125
122
126
-
### Rollup
123
+
### Rollup Configuration
127
124
128
-
The following example will shim the module in rollup using [@rollup/plugin-alias](https://www.npmjs.com/package/@rollup/plugin-alias):
125
+
Use [@rollup/plugin-alias](https://www.npmjs.com/package/@rollup/plugin-alias) to apply the shim in Rollup:
129
126
130
127
```js
131
128
// rollup.config.js
132
129
importaliasfrom'@rollup/plugin-alias'
133
130
134
131
return {
135
-
//... configuration
132
+
//Other configuration settings
136
133
plugins: [
137
134
alias({
138
135
entries: {
139
136
'vue-types':'vue-types/shim',
140
137
},
141
138
}),
142
-
//...other plugins
139
+
//Other plugins
143
140
],
144
141
}
145
142
```
146
143
147
144
::: warning
148
-
If you are using [@rollup/plugin-node-resolve](https://www.npmjs.com/package/@rollup/plugin-node-resolve), place the alias plugin **before** the resolve plugin.
149
-
145
+
If using [@rollup/plugin-node-resolve](https://www.npmjs.com/package/@rollup/plugin-node-resolve), place the alias plugin **before** the resolve plugin.
150
146
:::
151
147
152
-
### Nuxt
148
+
### Nuxt Configuration
153
149
154
-
VueTypes provides a Nuxt module that will automatically enable the shim for production builds:
150
+
VueTypes provides a Nuxt module that automatically enables the shim for production builds:
0 commit comments