Search⌘ K
AI Features
Home
Courses
A Beginner’s Guide To Nuxt 3

Creating and Displaying Tags

Explore how to create and manage dynamic tags extracted from image data in a Nuxt 3 project. This lesson guides you through manipulating tags using JavaScript Set and split methods, enhancing your app’s ability to display and filter images interactively based on user selections. You will understand how to update tags each time new data arrives, improving the user experience with dynamic content.

We'll cover the following...

Locating the tags property

When we make a request from the Pixabay API we receive an array of images. Each image is an object which resembles this:

Javascript (babel-node)
{
  "id": 195893,
  "pageURL": "https://pixabay.com/en/blossom-bloom-flower-195893/",
  "type": "photo",
  "tags": "blossom, bloom, flower",
  "previewURL": "https://cdn.pixabay.com/photo/2013/10/15/09/12/flower-195893_150.jpg"
  "previewWidth": 150,
  "previewHeight": 84,
  "webformatURL": "https://pixabay.com/get/35bbf209e13e39d2_640.jpg",
  "webformatWidth": 640,
  "webformatHeight": 360,
  "largeImageURL": "https://pixabay.com/get/ed6a99fd0a76647_1280.jpg",
  "fullHDURL": "https://pixabay.com/get/ed6a9369fd0a76647_1920.jpg",
  "imageURL": "https://pixabay.com/get/ed6a9364a9fd0a76647.jpg",
  "imageWidth": 4000,
  "imageHeight": 2250,
  "imageSize": 4731420,
  "views": 7671,
  "downloads": 6439,
  "likes": 5,
  "comments": 2,
  "user_id": 48777,
  "user": "Josch13",
  "userImageURL": "https://cdn.pixabay.com/user/2013/11/05/02-10-23-764_250x250.jpg",
}

Some key properties we use are:

  • Line 5: We have access to the tags from each image, we can use these to display and filter the images we display.

  • Line 9: The webFormatURL can be used to display an image that is 640 px wide.

  • Line 12: The largeImageURL property contains a 1280 px wide version of the image to display ...