Nuxt uses two directories to handle assets like stylesheets, fonts or images:
public/directory content is served at the server root as-is.
assets/directory contains by convention every asset that you want the build tool (Vite or Webpack) to process.
public/ directory is used as a public server for static assets publicly available at a defined URL of your application.
You can get a file in the
public/ directory from your application's code or from a browser by the root URL
For example, referencing an image file in the
public/img/ directory, available at the static URL
<template> <img src="/img/nuxt.png" alt="Discover Nuxt 3" /> </template>
By convention, Nuxt uses the
assets/ directory to store these files but there is no auto-scan functionality for this directory, and you can use any other name for it.
In your application's code, you can reference a file located in the
assets/ directory by using the
For example, referencing an image file that will be processed if a build tool is configured to handle this file extension:
<template> <img src="~/assets/img/nuxt.png" alt="Discover Nuxt 3" /> </template>
assets/directory at a static URL like
/assets/my-file.png. If you need a static URL, use the