A Beginner’s Guide To Nuxt 3/

...

/

Setting a Featured Header Image

Setting a Featured Header Image

Follow these steps to apply a random feature image to the header section.

We'll cover the following...

Our current project has a home page with a header section when the page loads. This header only contains a search input and a checkbox. To brighten up our home page, we will now fetch a random image to set as the header background.

Storing state variables

We need to add two new constants in our useState.js file:

Press + to interact
export const useIsEditorsChoice = () =>
	useState("is-editors-choice", () => false);
export const useFeaturedImage = () => useState("featured-image", () => "");

  • Line 1: The useIsEditorsChoice will be set to a default value of false until needed.

  • Line 3: The useFeaturedImage will hold the featured image. ... ...

Accessing the state variables in composable