Nuxt.JS Resource File

From WikiOD

By default, Nuxt uses several Webpack loaders, vue-loader, file-loader and url-loader, to handle file loading and referencing. For static resource files that do not need to be processed by Webpack, they can be placed in the static directory.

Webpack build[edit | edit source]

By default,  vue-loader automatically uses css-loader and Vue template compiler to compile and process styles and templates in vue files. During this compilation process, all resource URLs such as <img src="...">, background: url(...) and @import in CSS will be parsed into modules and referenced by require.

For example, suppose we have the following file directory structure:

-| assets/
 ----| image.png
 -| pages/
 ----| index.vue

If we use url('~assets/image.png') in the CSS code, it will be converted to require('~/assets/image.png') after compilation.

Please note: Starting from Nuxt 2.0, ~/alias will not be parsed correctly in CSS files. You must use ~assets (without slash) or @alias in the url CSS reference, that is, background:url("~assets/banner.svg") Or if we use the following code in pages/index.vue to reference image resources:


<img src="~/assets/image.png">

Then it will be converted to:

createElement('img', { attrs: { src: require('~/assets/image.png') } })

.png is not a JavaScript file, so Nuxt.js configures Webpack to use  two loaders, file-loader  and  url-loader , to handle such references.

The benefits of this are:

  • file-loader allows you to specify where to copy resource files and which directory to place after release, and allows you to use version hash codes to rename post-release files to achieve incremental updates and better caching strategies.
  • The url-loader can determine whether a file is converted into an inline base-64 code (if the file size is less than the threshold) based on the file size threshold you specify or whether it is downgraded using file-loader. Base-64ization of small files can effectively reduce the number of HTTP requests.

In fact, the default loader configuration of Nuxt.js is as follows:

     test: /\.(png|jpe?g|gif|svg)$/,
     loader: 'url-loader',
     query: {
       limit: 1000, // 1KB
       name: 'img/[name].[hash:7].[ext]'
     test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
     loader: 'url-loader',
     query: {
       limit: 1000, // 1 KBdd
       name: 'fonts/[name].[hash:7].[ext]'

That is, when the size of the file (picture or font) is less than 1K, it will be converted to Base-64 data URL for inline reference; otherwise, it will be copied to the specified subdirectory (under the .nuxt directory), and It has been renamed (plus a 7-digit hash code as the version identifier) ​​to achieve a better caching strategy.

When running our application with the nuxt command, the template code in pages/index.vue:

   <img src="~/assets/image.png">

Will be compiled to generate:

<img src="/_nuxt/img/image.0c61159.png">

If you want to update the configuration of these loaders or disable them, please refer to build.extend .

Static file[edit | edit source]

If your static resource files need to be built and compiled by Webpack, you can put them in the assets directory, otherwise you can put them in the static directory. When the Nuxt server is started, the files in this directory will be mapped to the root path / of the application. Files of this type like robots.txt or sitemap.xml are suitable to be placed in the static directory.

You can use the root path/combined with the resource relative path to reference static resources in the code:

<!-- Quote static Pictures in the catalog -->
 <nowiki><img src="/my-image.png"/></nowiki>
 <nowiki><img src="~/assets/my-image-2.png"/></nowiki>