somascope
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.

vue-json-file
content_copyfile_download
Data file:

/src/assets/courseData.json

{
  "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)
  
  <script>
  import data from '../assets/courseData.json'
  
  export default {
    data () {
      return {
        data,
        courses: data.courses
      }
    }
  </script>