Assets, Store, Middleware, and Plugins
Explore how to handle assets like images and fonts using the assets folder. Understand setting up a Vuex store with Nuxt conventions including the nuxtServerInit action. Learn to implement middleware for authentication checks and how to configure plugins safely for client or server environments in Nuxt.js.
We'll cover the following...
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:
<img src="~/assets/logo.png">
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 ...