Static directory

The static directory is directly mapped to the server root () and contains files that likely won't be changed. All included files will be automatically served by Nuxt and are accessible through your project root URL.

/static/robots.txt will be available at http://localhost:3000/robots.txt

/static/favicon.ico will be available at http://localhost:3000/favicon.ico

This option is helpful for files like robots.txt, sitemap.xml or CNAME (which is important for GitHub Pages deployment).

This directory cannot be renamed without extra configuration.

Static Assets

If you don't want to use Webpack assets from the assets directory, you can add the images to the static directory.

In your code, you can then reference these files relative to the root (/):

<!-- Static image from static directory -->
<img src="/my-image.png" />

<!-- webpacked image from assets directory -->
<img src="~/assets/my-image-2.png" />

Nuxt doesn't change this path, so if you customize your router.base then you'll need to make sure to add that manually to your paths. For example:

<img :src="`${yourPrefix}/my-image.png`" />

Static Directory Config

Should you need to you can configure the static/ directory behavior in the nuxt.config.js file.

Static asset Prefix

If you deploy Nuxt to a subfolder, e.g. /blog/, the router base will be added to the static asset path by default. If you want to disable this behavior, you can set static.prefix to false in the nuxt.config.js.

export default {
  static: {
    prefix: false
  }
}

Default: /blog/my-image.png

With static.prefix disabled: /my-image.png

Was this helpful?

Report an issue or Edit this page on GitHub

plugins

The plugins directory contains your Javascript plugins that you want to run before instantiating the root Vue.js Application.

store

The store directory contains your Vuex Store files. The Vuex Store comes with Nuxt out of the box but is disabled by default. Creating an index.js file in this directory enables the store.