NUXT- assets and static folder - when to use which?

Question

Being new to NUXT, I am a bit confused about the difference between the assets and static folders.

in the documentation regarding this folders it says:

every file below 1 KB will be inlined as base-64 data URL. Otherwise, the image/font will be copied in its corresponding folder (under the .nuxt directory) with a name containing a version hashes for better caching.

and also:

If you don't want to use webpacked Assets from the assets directory, you can create and use the static directory in your project root directory.

These files will be automatically served by Nuxt and accessible in your project root URL.

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

If I understand correctly the files in the static folder should be files that their name should not change(i.e. for 3rd party consumers) and in the assets folder, files that I don't care if their name change(e.g. the files I use on my page).

Why not put all of the files in the static folder and that's it?
What is the difference between robots.txt to robots.png?
What are the best practices regarding these directories?

Thanks

Solution

The content of assets folder will be process by webpack, if you use pre-processor for CSS like SASS, SCSS, or Stylus it will transform into generic CSS. Or maybe you put an image on that folder, it also will be optimized by webpack for production.

And for static folder, it just a place where you can put all of your static asset, like an image for background or slider. It never touched by webpack.

Comments

[Randall Flagg]

Why would I put the background image in the static folder and not in assets? All resources that have something to do with CSS should be touched by webpack. no?

[Jefry Dewangga]

Not really, you can actually use both assets and static.

[Randall Flagg]

When will I want it to be touched and when not?

[Microcipcip]

@RandallFlagg sometimes you need to have files that are not necessarily used directly in the website, for example PDFs or big assets to download, video, audio, etc. Basically stuff you don't want Webpack to process. My advice is....just use assets until you find the need to use the static folder. 99% of the time you won't need to touch the static folder.

[TikaL13]

I'd also like to understand the best way to reference an image being used as a background but still have it processed by Webpack. Typically a background image is large and would benefit having it optimized by imagemin or something like that.