Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 709
Randall Flagg Avatar asked Feb 15 '18 13:02

Randall Flagg


People also ask

How do you use assets in nuxt?

From nuxt documentation: Inside your ‍‍ vue templates, if you need to link to your assets directory use ~/assets/your_image. png with a slash before assets.

What is .nuxt folder?

nuxt folder: The router. js file is the generated router file that Nuxt generates for you when you put . vue files inside the pages folder. You can use this file for debugging for when you want to look up which routes are generated for vue-router and find out the names of a specific route.

What is static folder in nuxt?

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.

What is nuxt generate?

nuxt generate - Build the application (if needed), generate every route as a HTML file and statically export to dist/ directory (used for static hosting). nuxt start - serve the dist/ directory like your static hosting would do (Netlify, Vercel, Surge, etc), great for testing before deploying.


1 Answers

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.

like image 72
Jefry Dewangga Avatar answered Sep 19 '22 05:09

Jefry Dewangga