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
Copy file name to clipboardExpand all lines: docs/guide/asset-url.md
+9
Original file line number
Diff line number
Diff line change
@@ -20,6 +20,15 @@ createElement('img', {
20
20
21
21
By default the following tag/attribute combinations are transformed, and can be configured using the [transformAssetUrls](../options.md#transformasseturls) option.
22
22
23
+
```js
24
+
{
25
+
video: ['src', 'poster'],
26
+
source:'src',
27
+
img:'src',
28
+
image:'xlink:href'
29
+
}
30
+
```
31
+
23
32
In addition, if you have configured to use [css-loader](https://github.com/webpack-contrib/css-loader) for the `<style>` blocks, asset URLs in your CSS will also be processed in a similar fashion.
Copy file name to clipboardExpand all lines: docs/guide/pre-processors.md
+7-7
Original file line number
Diff line number
Diff line change
@@ -20,10 +20,10 @@ In your webpack config:
20
20
module.exports= {
21
21
module: {
22
22
rules: [
23
-
// ...other rules omitted
23
+
// ...other rules omitted
24
24
25
-
// this will apply to both plain .scss files
26
-
// AND <style lang="scss"> blocks in vue files
25
+
// this will apply to both plain `.scss` files
26
+
// AND `<style lang="scss">` blocks in `.vue` files
27
27
{
28
28
test:/\.scss$/,
29
29
use: [
@@ -204,23 +204,23 @@ module.exports = {
204
204
},
205
205
module: {
206
206
rules: [
207
-
// ...other rules omitted
207
+
// ...other rules omitted
208
208
{
209
209
test:/\.ts$/,
210
210
loader:'ts-loader',
211
211
options: { appendTsSuffixTo: [/\.vue$/] }
212
212
}
213
213
]
214
214
},
215
-
// ...plugin omitted
215
+
// ...plugin omitted
216
216
}
217
217
```
218
218
219
219
Configuration of TypeScipt can be done via `tsconfig.json`. Also see docs for [ts-loader](https://github.com/TypeStrong/ts-loader).
220
220
221
221
## Pug
222
222
223
-
Processing templates is a little different, because most webpack template loaders such as `pug-loader` return a template function instead of a compiled HTML string. Instead of using `pug-loader`, we need to use a loader that returns the raw HTML string instead, e.g. `pug-plain-loader`:
223
+
Processing templates is a little different, because most webpack template loaders such as `pug-loader` return a template function instead of a compiled HTML string. Instead of using `pug-loader`, we need to use a loader that returns the raw HTML string, e.g. `pug-plain-loader`:
224
224
225
225
```bash
226
226
npm install -D pug pug-plain-loader
@@ -250,7 +250,7 @@ If you also intend to use it to import `.pug` files as HTML strings in JavaScrip
250
250
{
251
251
test:/\.pug$/,
252
252
oneOf: [
253
-
// this applies to <template lang="pug"> in Vue components
253
+
// this applies to `<template lang="pug">` in Vue components
Copy file name to clipboardExpand all lines: docs/migrating.md
+11-11
Original file line number
Diff line number
Diff line change
@@ -6,14 +6,14 @@ sidebarDepth: 2
6
6
# Migrating from v14
7
7
8
8
::: tip Heads Up
9
-
We are in the process of upgrading Vue CLI 3 beta to use webpack 4 + Vue Loader 15, so you might want to wait if you are planning to upgrade to Vue CLI 3.
9
+
We are in the process of upgrading Vue CLI 3 beta to use webpack 4 + Vue Loader v15, so you might want to wait if you are planning to upgrade to Vue CLI 3.
10
10
:::
11
11
12
12
## Notable Breaking Changes
13
13
14
14
### A Plugin is Now Required
15
15
16
-
Vue Loader 15 now requires an accompanying webpack plugin to function properly:
16
+
Vue Loader v15 now requires an accompanying webpack plugin to function properly:
17
17
18
18
```js
19
19
// webpack.config.js
@@ -29,7 +29,7 @@ module.exports = {
29
29
30
30
### Loader Inference
31
31
32
-
Vue Loader 15 now uses a different strategy to infer loaders to use for language blocks.
32
+
Vue Loader v15 now uses a different strategy to infer loaders to use for language blocks.
33
33
34
34
Take `<style lang="less">` as an example: in v14 and below, it will attempt to load the block with `less-loader`, and implicitly chains `css-loader` and `vue-style-loader` after it, all using inline loader strings.
35
35
@@ -39,7 +39,7 @@ In v15, `<style lang="less">` will behave as if it's an actual `*.less` file bei
39
39
{
40
40
module: {
41
41
rules: [
42
-
// ...other rules
42
+
// ...other rules
43
43
{
44
44
test:/\.less$/,
45
45
use: [
@@ -102,7 +102,7 @@ If you also intend to use it to import `.pug` files as HTML strings in JavaScrip
102
102
{
103
103
test:/\.pug$/,
104
104
oneOf: [
105
-
// this applies to <template lang="pug"> in Vue components
105
+
// this applies to `<template lang="pug">` in Vue components
106
106
{
107
107
resourceQuery:/^\?vue/,
108
108
use: ['pug-plain-loader']
@@ -158,13 +158,13 @@ The good news is that you can now configure `localIdentName` in one place:
158
158
}
159
159
```
160
160
161
-
If you only want to use CSS Modules in some of your Vue components, you can use a `oneOf` rule and check for the `module` string in resourceQuery:
161
+
If you only want to use CSS Modules in some of your Vue components, you can use a `oneOf` rule and check for the `module` string in `resourceQuery`:
162
162
163
163
```js
164
164
{
165
165
test:/\.css$/,
166
166
oneOf: [
167
-
// this matches <style module>
167
+
// this matches `<style module>`
168
168
{
169
169
resourceQuery:/module/,
170
170
use: [
@@ -178,7 +178,7 @@ If you only want to use CSS Modules in some of your Vue components, you can use
178
178
}
179
179
]
180
180
},
181
-
// this matches plain <style> or <style scoped>
181
+
// this matches plain `<style>` or `<style scoped>`
182
182
{
183
183
use: [
184
184
'vue-style-loader',
@@ -203,7 +203,7 @@ Works the same way as you'd configure it for normal CSS. Example usage with [min
203
203
},
204
204
{
205
205
test:/\.css$/,
206
-
// or ExtractTextWebpackPlugin.extract(...)
206
+
// or `ExtractTextWebpackPlugin.extract(...)`
207
207
use: [
208
208
MiniCssExtractPlugin.loader,
209
209
'css-loader'
@@ -230,7 +230,7 @@ externals: nodeExternals({
230
230
})
231
231
```
232
232
233
-
With v15, imports for `<style src="dep/foo.css">` now has resourceQuery strings appended at the end of the request, so you need to update the above to:
233
+
With v15, imports for `<style src="dep/foo.css">` now has `resourceQuery` strings appended at the end of the request, so you need to update the above to:
234
234
235
235
```js
236
236
externals:nodeExternals({
@@ -261,7 +261,7 @@ The following option has been renamed:
261
261
262
262
-`transformToRequire` (now renamed to `transformAssetUrls`)
263
263
264
-
The following option has been changed to resourceQuery:
264
+
The following option has been changed to `resourceQuery`:
265
265
266
266
-`shadowMode` (now use inline resource queries, e.g. `foo.vue?shadow`)
Copy file name to clipboardExpand all lines: docs/options.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -43,7 +43,7 @@ sidebar: auto
43
43
44
44
Configure ES2015+ to ES5 transpiling options for the generated render function code. The [transpiler](https://github.com/vuejs/vue-template-es2015-compiler) is a fork of [Buble](https://github.com/Rich-Harris/buble), so consult the available options [here](https://buble.surge.sh/guide/#using-the-javascript-api).
45
45
46
-
The template render functions compilation supports a special transform `stripWith` (enabled by default), which removes the `with` usage in generated render functions to make them strict-mode compliant. This is enabled by default.
46
+
The template render functions compilation supports a special transform `stripWith` (enabled by default), which removes the `with` usage in generated render functions to make them strict-mode compliant.
0 commit comments