Vue-CLI Webpack how do you import vue-shopify-products library?

Question

The documentation says like this:

<script type="text/javascript" src="assets/js/vue-shopify-products.js"></script>

And then before you initialize vue, you do this:

 Vue.use(ShopifyProducts);

What do you do if you use vue-cli webpack template?

My main.js file looks like this

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import * as d3 from 'd3'
import * as shopifyProducts from 'vue-shopify-products'

Vue.config.productionTip = false

Vue.use(shopifyProducts)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>',

  created: function () {
    d3.csv('/static/data/csv-files/bicycles.csv', (data) => {
      let products = this.$formatProducts(data)
      console.log(products)
    })
  }
})

This doesn't work as I get the error 'Uncaught (in promise) TypeError: _this.$formatProducts is not a function'. What is the correct way to include Vue-Shopify-Products and reference the $formatProducts function?

Answer 1

Since it is an npm package installed as a dependency, you should import it this way,

import defaultExport from "module-name";

so this should work:

import ShopifyProducts from "vue-shopify-products";
Vue.use(ShopifyProducts);

After that you can get rid of the script reference of the module.

Edit 1:

I don't think is going to work since the module you are trying to use as a Vue plugin do not follow the conventions especified on the Vue documentation.