Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Using Vue-Router Dynamic Routes to Load Data Chapter 9

The other issue with the Shopify CSV data is that the punctuation and grammar of the field

headings do not make great object keys. Ideally object keys would be like URL slugs,
lowercase and contain no spaces. For example, Variant Inventory Qty should ideally

be variant-inventory-qty.

To save manually processing the data ourselves and updating the keys, we can use a Vue

plugin to process the output from either loading library and return an object of products
formatted exactly how we want. The plugin is vue-shopify-products and is available

from unpkg:

https://unpkg.com/vue-shopify-products

Download and include the library into your index.html file. The next step is to tell Vue to

use this plugin – at the top of your app.js file, include the following line:

Vue.use(ShopifyProducts);

This now exposes a new method on the Vue instance of $formatProducts(), which

allows us to pass in the output of our CSV loading library and get a more useful collection
of objects:

Vue.use(ShopifyProducts);

const store = new Vuex.Store({});

const router = new VueRouter({});

new Vue({

el: '#app',

store,

router,

created() {

CSV.fetch({url: './data/csv-files/bicycles.csv'}).then(data => {

let products = this.$formatProducts(data);

console.log(products);

});

}

});