在 Nuxt.js 中使用 vue-underscore

Question

I'm currently reworking an application that I was making in VueJS for Nuxt, however I get an error missing stack frames that I can't find much about – I'm trying to use vue-underscore and while previously in VueJS this worked fine, I'm now having this missing stack frames error message appear.

In a vue-underscore.js file I setup underscore like this:

import Vue from 'vue'
import underscore from 'vue-underscore'

Vue.use(underscore)

I import {_} like this in my component:

import {_} from 'vue-underscore';

Error message here:

"use strict";
    __webpack_require__.r(__webpack_exports__);
    /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = 
    __webpack_require__(/*! vue */ "vue");
    /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0___default = 
    /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_0__);
    /* harmony import */ var vue_underscore__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vue-underscore */ "vue-underscore");
/* harmony import */ var vue_underscore__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(vue_underscore__WEBPACK_IMPORTED_MODULE_1__);
 vue__WEBPACK_IMPORTED_MODULE_0___default.a.use(vue_underscore__WEBPACK_IMPORTED_MODULE_1___default.a); 

Any help gratefully received.

Answer 1

I had the same problem. We both were badly using it!

Let's summarize.

1. Add the repo

npm install vue-underscore

OR

yarn add vue-underscore

2. Create a file named plugins/underscore.js

import Vue from 'vue'
import underscore from 'vue-underscore'
Vue.use(underscore)

3. Add it to the nuxtconfig.js file

plugins: [{ src: '~/plugins/underscore', ssr: false }]

4. Use it

<script>
export default {
  name: 'MyComponent',
  mounted() {
    console.log(this.$_.range(2000, 2020))
  }
}
</script>