title: Using Swiper js with Nuxt throws dependency not found error
body: <p>I was using <a href="https://github.com/surmon-china/vue-awesome-swiper" rel="nofollow noreferrer">vue-awesome-swiper</a> but recently I have some issues with it on mobile devices ( i have a buttons carousel and when i click on one of them it takes around a second or two for btn to be clicked ) and as that package hasn't been updated since 2020 and still using swiper v5 , I decided to use <a href="https://swiperjs.com/" rel="nofollow noreferrer">Swiper js</a> itself . I have done as said in docs but I get <code>dependency not found</code> error</p>
  <p>package.json</p>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;name&quot;: &quot;myapp&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;private&quot;: true,
    &quot;scripts&quot;: {
      &quot;dev&quot;: &quot;nuxt&quot;,
      &quot;dev:host&quot;: &quot;nuxt --hostname 0.0.0.0 --port 8000&quot;,
      &quot;build&quot;: &quot;nuxt build&quot;,
      &quot;start&quot;: &quot;nuxt start&quot;,
      &quot;generate&quot;: &quot;nuxt generate&quot;
    },
    &quot;dependencies&quot;: {
      &quot;@nuxtjs/axios&quot;: &quot;^5.13.6&quot;,
      &quot;@nuxtjs/device&quot;: &quot;^2.1.0&quot;,
      &quot;core-js&quot;: &quot;^3.15.1&quot;,
      &quot;nuxt&quot;: &quot;^2.15.7&quot;,
      &quot;swiper&quot;: &quot;^7.0.9&quot;,
      &quot;vuetify&quot;: &quot;^2.5.5&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@nuxtjs/vuetify&quot;: &quot;^1.12.1&quot;,
      &quot;@mdi/font&quot;: &quot;^5.9.55&quot;,
      &quot;@nuxtjs/dotenv&quot;: &quot;^1.4.1&quot;,
      &quot;noty&quot;: &quot;^3.2.0-beta&quot;,
      &quot;nuxt-gsap-module&quot;: &quot;^1.2.1&quot;,
      &quot;sass&quot;: &quot;1.32.13&quot;
    }
  }
  </code></pre>
  <p>test.vue</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;div class=&quot;swiper&quot;&gt;
          &lt;div class=&quot;swiper-wrapper&quot;&gt;
              &lt;div class=&quot;swiper-slide&quot; v-for=&quot;(item, idx) in 20&quot; :key=&quot;item&quot; style=&quot;width:auto&quot;&gt;
                  &lt;v-chip
                  class=&quot;items px-2&quot;
                  :class=&quot;{'items--active': activeId === item }&quot;
                  label @click.prevent=&quot;itemClicked(item, idx)&quot;&gt;
                      {{item}}
                  &lt;/v-chip&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Swiper , { FreeMode } from 'swiper';
  import 'swiper/css';
  export default {
      data(){
          return{
              activeId: null
          }
      },
      methods:{
          itemClicked(item, itemIndex){
              this.activeId = item
          },
      },
      created(){
          if(process.client){
              Swiper.use([FreeMode]);
              const swiper = new Swiper('.swiper', {
                  preventClicks: true,
                  preventClicksPropagation: true,
                  loop: false,
                  slidesPerView: 'auto',
                  spaceBetween: 30,
                  freeMode: {
                      enabled: true,
                      sticky: true
                  }
              });
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/0zSWG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0zSWG.png" alt="enter image description here" /></a></p>
  <p><strong>UPDATE:</strong>
  As suggested tried plugin injection and still get</p>
  <pre><code>These dependencies were not found:
  * swiper in ./plugins/swip.js
  * swiper/css in ./plugins/swip.js
  To install them, you can run: npm install --save swiper swiper/css
  </code></pre>
  <p>plugins/swip.js</p>
  <pre class="lang-js prettyprint-override"><code>import Swiper , { FreeMode } from 'swiper';
  import 'swiper/css';
  export default ({ app }, inject) =&gt; {
      inject('swiper', (el , options)=&gt;{
          Swiper.use([FreeMode]);
          return new Swiper(el, options);
      })
  }
  </code></pre>