DEV Community

Cover image for Images & assets in Nuxt 3

Posted on


Images & assets in Nuxt 3

In Nuxt.js, the assets directory is a folder for storing assets such as fonts, images, or other files that you want to be processed by webpack. These files will be processed by webpack and made available to be used in your application.

The public directory, on the other hand, is meant to be a place for storing static files that should not be processed by webpack. These files will be directly copied into the output directory without being processed. This can be useful for storing files such as favicons or images that you want to include in your application, but don't want to go through the asset pipeline.

One important thing to note is that the public directory has a higher priority when it comes to file resolution. This means that if a file with the same name exists in both the public and assets directories, the file in the public directory will be used.

In terms of how these files are used in your Nuxt.js application, both the assets and public directories can be accessed through the ~ alias. For example, if you have an image file located at assets/images/my-image.png, you can reference it in your application like this: . Similarly, if you have a file located at public/my-file.txt, you can reference it like this: Download my file.

In summary, the main difference between the assets and public directories in Nuxt.js is that the assets directory is meant for files that should be processed by webpack, while the public directory is meant for static files that should not be processed and should just be copied as-is into the output directory.

Guillaume Duhan

Top comments (0)

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

⭐️🎀 JavaScript Visualized: Promises & Async/Await

async await