Skip to content
This repository was archived by the owner on Sep 3, 2024. It is now read-only.

Commit 4013e39

Browse files
morniratinux
authored andcommitted
Add FAQ about loading audio files with Webpack (#1256)
* Add FAQ about loading audio files with Webpack I hard a hard time finding how to achieve this in Nuxt 2. Please correct me if this is not the optimal way πŸ™‡β€β™‚οΈ * Fix spelling mistakes
1 parent e0d206c commit 4013e39

File tree

1 file changed

+52
-0
lines changed

1 file changed

+52
-0
lines changed

β€Žen/faq/webpack-audio-files

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
title: Loading audio files from assets directory
3+
description: How to extend Webpack config to load audio files
4+
---
5+
6+
# How to extend Webpack config to load audio files
7+
8+
Audio files should be processed by `file-loader`. This loader is already included in the default Webpack configuration, but it is not set up to handle audio files. You need to extend its default configuration in `nuxt.config.js`:
9+
10+
```js
11+
export default {
12+
build: {
13+
extend(config, ctx) {
14+
config.module.rules.push({
15+
test: /\.(ogg|mp3|wav|mpe?g)$/i,
16+
loader: 'file-loader',
17+
options: {
18+
name: '[path][name].[ext]',
19+
},
20+
})
21+
},
22+
}
23+
}
24+
```
25+
26+
You can now import audio files like this `<audio :src="require('@/assets/water.mp3')" controls></audio>`.
27+
28+
If you only want to write: `<audio src="@/assets/water.mp3" controls></audio>`, you need to tell `vue-loader` to automatically require your audio files when you reference them with the `src` attribute:
29+
30+
```js
31+
export default {
32+
build: {
33+
loaders: {
34+
vue: {
35+
transformAssetUrls: {
36+
audio: 'src',
37+
},
38+
},
39+
},
40+
41+
extend(config, ctx) {
42+
config.module.rules.push({
43+
test: /\.(ogg|mp3|wav|mpe?g)$/i,
44+
loader: 'file-loader',
45+
options: {
46+
name: '[path][name].[ext]',
47+
},
48+
})
49+
},
50+
},
51+
}
52+
```

0 commit comments

Comments
Β (0)