Pulling in several static properties into Vue.js

Question

I am very new to Vue.js and we are working on adding in Vue.js into an existing project piece by piece. I'm working on rewriting the product slider in Vue. It is currently using the jquery slick slider. So in the current/old code in the html this js function is being called:

function productDetailsRecommendations(compositeNumbers) {
  var params = {
    compositeNumbers: compositeNumbers,
    strategy: 'pp12',
    backupStrategy: 'popular',
    divId: 'recommendedProductsHorizontal',
    isVertical: false,
    isHideHeaderText: false,
    headerText: 'Guests Who Viewed This Item Also Viewed These',
    backupHeaderText: 'Popular Products',
    itemsPerPage: 5,
    itemDisplayLimit: 10,
    numberOfItems: 15,
    responseMap: null
  };

  createSlider(params);
}

Now I am using vue-carousel to recreate the slider. So I replaced that call with my own copied function: productDetailsRecommendationsVue.

Now I have created a ProductRecommendationsSlider.vue as the slider component. And I have a index.js as the entry point where the slider gets initialized.

Now my boss told me I need to put the productDetailsRecommendationsVue function into index.js.

// index.js

import Vue from 'vue';
import axios from 'axios';
import VueCarousel from 'vue-carousel';
import Slider from '/components/slider/ProductRecommendationsSlider'

Vue.use(VueCarousel);

window.productDetailsRecommendationsVue=function(compositeNumbers) {
  var params = {
    compositeNumbers: compositeNumbers,
    strategy: 'pp12',
    backupStrategy: 'popular',
    divId: 'recommendedProductsHorizontal',
    isVertical: false,
    isHideHeaderText: false,
    headerText: 'Guests Who Viewed This Item Also Viewed These',
    backupHeaderText: 'Popular Products',
    itemsPerPage: 5,
    itemDisplayLimit: 10,
    numberOfItems: 15,
    responseMap: null
  };

};

/* eslint-disable no-new */
new Vue({
  el: '#itemDetailPage #recommendedProductsHorizontal .imageSlider',
  components: {
    Slider,
    'carousel': VueCarousel.Carousel,
    'slide': VueCarousel.Slide
  },
  template: '<product-slider></product-slider>'
});

But my main question is how do I get those parameters into the component?

They are needed in one of the functions in ProductRecommendationsSlider.vue. My boss said I was on the right track with placing the js function there in the index.js. All the tutorials I've found online talk about building a project from scratch. Tying Vue into an existing project is much more difficult IMO.

Answer 1

Since you're using single file components (*.vue within a Vue CLI generated project), your project already has modularization support, so you wouldn't need to attach properties/functions to the window object. Instead, you could encapsulate your static properties/functions within the component file itself:

// ProductRecommendationsSlider.vue
<script>
function productDetailsRecommendations() {
  return { /*...*/ }
}

export default {
  data() {
    params: {}
  },
  methods: {
    loadParams() {
      this.params = productDetailsRecommendations();
    }
  }
}
</script>

or in separate files that you could import into your component:

// ProductRecommendationsSlider.vue
<script>
import { productDetailsRecommendations } from '@/utils';

export default {
  data() {
    params: {}
  },
  methods: {
    loadParams() {
      this.params = productDetailsRecommendations();
    }
  }
}
</script>

// <root>/src/utils.js
export function productDetailsRecommendations() {
  return { /*...*/ }
}

Then, you could bind those parameters to your vue-carousel properties. Note only some of the parameters in your example appear to be supported by vue-carousel (unsupported marked by n/a):

"strategy": "pp12",                           // n/a
"backupStrategy": "popular",                  // n/a
"divId": "recommendedProductsHorizontal",     // ID of container div
"isVertical": false,                          // n/a
"isHideHeaderText": false,                    // true = hide `headerText` h3; false = show it
"headerText": "Guests Who Viewed This Item Also Viewed These",  // h3 text content (isHideHeaderText: true)
"backupHeaderText": "Popular Products",       // h3 text content (isHideHeaderText: false)
"itemsPerPage": 5,                            // vue-carousel perPage
"itemDisplayLimit": 10,                       // n/a
"numberOfItems": 15,                          // vue-carousel item count
"responseMap": null                           // n/a

Example data bindings:

<template>
  <div class="product-slider" :id="params.recommendedProductsHorizontal">
    <h3 v-if="!params.isHideHeaderText">{{params.headerText}}</h3>
    <carousel :perPage="params.itemsPerPage">
      <slide v-for="i in params.numberOfItems" :key="i">
        <span class="label">{{i}}</span>
      </slide>
    </carousel>
    <section>
      <button @click="loadParams">Load params</button>
      <pre>params: {{params}}</pre>
    </section>
  </div>
</template>

demo

Answer 2

You can assign window.productDetailsRecommendationVue in vue data or computed properties

1) Change window.productDetailsRecommendationsVue from a function to

window.productDetailsRecommendationsVue = {
   //compositeNumbers: "I have no idea where this comes from but it could be passed separately",
    strategy: "pp12",
    backupStrategy: "popular",
   divId: "recommendedProductsHorizontal",
   isVertical: false,
    isHideHeaderText: false,
    headerText: "Guests Who Viewed This Item Also Viewed These",
    backupHeaderText: "Popular Products",
    itemsPerPage: 5,
    itemDisplayLimit: 10,
    numberOfItems: 15,
    responseMap: null
};

2) inside of your vue instance of index.js assign window.productDetailsRecommendtionsVue to a data property:

new Vue({
  el: '#itemDetailPage #recommendedProductsHorizontal .imageSlider',
  components: {
    Slider,
    'carousel': VueCarousel.Carousel,
    'slide': VueCarousel.Slide
  },
  data: {
    oldSliderData: window.productDetailsRecommendationsVue
  }
  template: '<product-slider></product-slider>'
});

It is now accessible to components using the standard prop process. I'm not sure where is coming from b/c I don't see it imported.