Understanding asset serving

Nuxt uses the vue-loader, file-loader, and url-loader webpack loaders to serve the assets in your app. Firstly, Nuxt will use vue-loader to process the <template> and <style> blocks with css-loader and vue-template-compiler to compile elements such as <img src="...">, background-image: URL(...), and CSS @import in these blocks into module dependencies. Take the following example:

// pages/index.vue
<template>
  <img src="~/assets/sample-1.jpg">
</template>

<style>
.container {
  background-image: url("~assets/sample-2.jpg");
}
</style>

The image element and the assets in the preceding <template> and <style> block will be compiled and translated into the following code and module dependencies:

createElement('img', { attrs: { src: require('~/assets/sample-1.jpg') }})
require('~/assets/sample-2.jpg')