Adding Swiper

Swiper is a JavaScript touch slider that can be used in modern web apps (desktop or mobile) and mobile native or hybrid apps. It is part of Framework7 (https://framework7.io/) and Ionic Framework (https://ionicframework.com/) for building mobile hybrid apps. We can get Swiper set up for a web app easily using its CDN resources, just like we did with other frameworks and libraries in the past sections. But let's find out how you can install and use it in a proper way with Nuxt in the following steps:

1. Install Swiper in your Nuxt project via npm through your terminal:

$ npm i swiper

2. Add the following HTML elements to create an image slider in the <template> block:

// pages/index.vue
<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img 
       src="~/assets/images/sample-01.jpg">
      </div>
      <div class="swiper-slide&quot...