Want to take a look at our new docs? Our
new docs
are now in beta. Have fun!
How to extend Webpack to load audio files?
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
:
export default {
build: {
extend(config, ctx) {
config.module.rules.push({
test: /\.(ogg|mp3|wav|mpe?g)$/i,
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
})
}
}
}
You can now import audio files like this <audio :src="require('@/assets/water.mp3')" controls></audio>
.
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:
export default {
build: {
loaders: {
vue: {
transformAssetUrls: {
audio: 'src'
}
}
},
extend(config, ctx) {
config.module.rules.push({
test: /\.(ogg|mp3|wav|mpe?g)$/i,
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
})
}
}
}