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

Randall Flagg picture Randall Flagg · Feb 15, 2018 · Viewed 13.4k times · Source

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

Answer

Jefry Dewangga picture Jefry Dewangga · Feb 23, 2018

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.