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
{{ message }}
This repository was archived by the owner on Sep 3, 2024. It is now read-only.
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
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:
0 commit comments