Assets, Store, Middleware, and Plugins

Assets

The assets folder is for any non-JS assets (such as images, fonts, and CSS files) that we want to use from our components. We can access the contents of this folder via the ~ alias, both within our components’ code and template sections.

So, for example, if we have a logo.png file that we want to use in one of our components, we can put the file in the assets folder and reference it within our component template like this:

Note: By default, Nuxt configures webpack (which it uses behind the scenes to bundle our application) to convert any images and fonts smaller than 1KB to inline Base64 data URLs.

For other kinds of assets that we don’t want to be processed by webpack, Nuxt creates the static folder. Files in this folder are served relative to the ...