Using jQuery in VuePress

From Dependency

  1. Install jQuery:
yarn add jquery -D
  1. Create a .vuepress/enhanceApp.js:
export default ({ isServer }) => {
  if (!isServer) {
    // Register jQuery
    window.$ = window.jQuery = require('jquery')
    // Register your jQuery plugin
    require('owl.carousel')
    require('owl.carousel/dist/assets/owl.carousel.min.css')
    require('owl.carousel/dist/assets/owl.theme.default.min.css')
  }
}

Note

You cannot to import jquery at the top directly because the enhanceApp.js will run both server and client side. See: Browser API Access Restrictions

  1. Create a Vue component ( e.g. .vuepress/components/Carousel.vue):
<template>
  <div id="demos">
    <div class="owl-carousel owl-theme">
      <div class="item"><h4>1</h4></div>
      <div class="item"><h4>2</h4></div>
      <div class="item"><h4>3</h4></div>
      <div class="item"><h4>4</h4></div>
      <div class="item"><h4>5</h4></div>
      <div class="item"><h4>6</h4></div>
      <div class="item"><h4>7</h4></div>
      <div class="item"><h4>8</h4></div>
      <div class="item"><h4>9</h4></div>
      <div class="item"><h4>10</h4></div>
      <div class="item"><h4>11</h4></div>
      <div class="item"><h4>12</h4></div>
    </div>
  </div>
</template>

<script>
  export default {
    mounted () {
      $('.owl-carousel').owlCarousel({
        loop: true,
        margin: 10,
        nav: true,
        responsive: {
          0: {
            items: 1
          },
          600: {
            items: 3
          },
          1000: {
            items: 5
          }
        }
      })
    }
  }
</script>

<style>
  #demos .owl-carousel .item {
    height: 10rem;
    background: #4DC7A0;
    padding: 1rem;
    font-size: 30px;
    text-align: center;
    color: white;
  }
</style>
  1. Using this Vue component at your markdown file:
<Carousel/>
  1. Then you will get:

From CDN

If you want to use a juqery from CDN, You need to add jQuery via head:

// .vuepress/config.js
module.exports = { 
  head: [
    ['script', { src: 'https://code.jquery.com/jquery-3.3.1.min.js' }]
  ]
}

The remaining steps are the same as not using CDN.

From Local File

If you don’t want to use the CDN, it’s easy enough to switch to jQuery files hosted on your own domain.

First, put the script file (e.g. jquery.min.js) under .vuepress/public/, then update your site config:

// .vuepress/config.js
module.exports = { 
  head: [
    ['script', { src: '/jquery.min.js' }]
  ]
}