使用 jQuery 插件的 VueJS 2 服务器端渲染

Question

I'm trying to convert an old landing page that has a few jQuery plugins to a Vue app. The reason is, that the landing page is being extended and will become a web app.

Using https://github.com/vuejs/vue-hackernews-2.0/ as a template. Main reason is that it does server side rendering.

Problem is the error:

ReferenceError: window is not defined
    at Object.<anonymous> (__vue_ssr_bundle__:3398:2408)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)
    at Object.module.exports.Object.defineProperty.value (__vue_ssr_bundle__:1280:126)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)
    at Object.<anonymous> (__vue_ssr_bundle__:2099:3)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)
    at Object.<anonymous> (__vue_ssr_bundle__:1380:81)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)
    at Object.module.exports.Object.defineProperty.value (__vue_ssr_bundle__:378:66)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)

So far, I've found out that the problem is caused by window not being in Node. However, I do not know how to make it available or how I should inject jQuery after the page is server side rendered.

vue-hackernews-2.0 is almost unchanged. The main change I did was adding jQuery to webpack.client.config.js .

This is added to plugins (found another answer that it should make jQuery available when it's needed in the app):

new webpack.ProvidePlugin({
  $: 'jquery',
  jquery: 'jquery',
  'window.jQuery': 'jquery',
  jQuery: 'jquery'
})

And this is the LandingView.vue

<template>
  <div class="landing-page">
  </div>
</template>

<script>
  import owl from '../../public/assets/libs/owl.carousel.2.0.0-beta.2.4/owl.carousel.min.js'
  import $ from 'jquery';

  export default {
    name: 'landing-view',
    created () {
      console.log('hello world!');
    }
  }
</script>

Answer 1

It turns out I needed to inject my jQuery plugin on mounted event https://v2.vuejs.org/v2/api/?#mounted

It also says

This hook is not called during server-side rendering.

I just assigned the plugin to window and then I was able to initiate it.

<template>
  <div class="landing-page">
  </div>
</template>

<script>
  // import $ from 'jquery'; //no need to import it, as it's provided by webpack

  export default {
    name: 'landing-view',
    mounted() {
      // created() is only available in v1

      window.owl = require('../../public/assets/libs/owl.carousel.2.0.0-beta.2.4/owl.carousel.min.js');


      // the rest of my code
      $('.some-carousel').owlCarousel();

    }
  }
</script>

---

I am not sure if this is the proper way to solve this. I appreciate any comments on best practices!