9/6/2018 - 3:25 AM

Vue external JSON data file

Example of externalizing data from a component in a JSON file, and loading it into a Vue component. Basically: Just assign the import to a data property.

Data file:


  "courses": [
      "id": 1,
      "title": "1. Exploring a Career",
      "photo": "course-photo1.jpg",
      "launchUrl": "/course1",
      "storageKey": "6bq22dxTTKi",
      "totalProgress": 28
      "id": 2,
      "title": "2. Filling Out the Paperwork",
      "photo": "course-photo7.jpg",
      "launchUrl": "/course2",
      "storageKey": "5cDc0hHrI1O",
      "totalProgress": 31
  // A Vue file
  // Load in the JSON file, and set a particular Vue data property to the value
  // of an object in the JSON file (courses)
  import data from '../assets/courseData.json'
  export default {
    data () {
      return {