Using Vue-Router Dynamic Routes to Load Data Chapter 9Advantages:
Simulates real-world development of loading CSV
Quick, instant updates
Can be developed offlineDisadvantages:
Requires installing software
May require some configuration and/or command-line knowledgeThe option we are going to choose is the last one, using an HTTP server. Let's load and
process the CSV so we can start creating our shop.
Loading CSV
To simulate gathering data from a shop database or point-of-sale, our app is going to load
product data from a CSV. CSV, or Comma Separated Values, is a file format often used for
sharing data in a database-style way. Think of how you would lay out a list of products in
excel or numbers: that is how a CSV file is formatted.
This next step is going to require downloading and including a couple more JavaScript
files. If you chose option 1 in the Server setup section – to have your files stored in a JSON
file locally – you can skip this step.
The data we're going to be using is example shop data from Shopify. These CSVs have a
wide selection of product types and different data, which will test our Vue skills. Shopify
has made their example data available for download from a GitHub repository (https://
github.com/shopifypartners/shopify-product-csvs-and-images). Download any CSV
file that takes your interest and save it in a data/ folder in your file system. For this app, I
will be using the bicycles.csv file.
JavaScript cannot natively load and process CSV files without a significant amount of
coding and processing of comma-separated and quote-encapsulated values. To save this
book digressing into how to load, parse, and process CSV files, we are going to use a library
to do the heavy lifting for us. There are two noteworthy libraries, CSV Parser (https://
github.com/okfn/csv.js) and d3 (https://d3js.org/). CSV Parser simply does CSV
parsing and nothing else, while d3 has the ability to generate charts and data visualizations.