import json file in laravel in vue component

Question

I'm trying to import a json file in my vue component but its giving this error

ERROR in ./~/buble-loader?{"objectAssign":"Object.assign"}!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/src/App.vue Module not found: Error: Can't resolve 'assets/incomingData.json' in '/var/www/html/mac/resources/assets/src'

script:

import jsonData from 'assets/incomingData.json'

export default {
  name: 'app',
  data () {
    return {
      entryData: jsonData,
      outputData: ''
    }
  },
  created () {
    this.$store.commit('setEntryData', this.entryData['bundle'])
    this.$store.commit('setTargetRate', this.entryData.targetNetRate)
  },
  beforeMount () {
    this.$store.dispatch('calculate').then(res => {
      this.outputData = this.$store.getters.getCalculatedData
    })
  }
}

folder structure:

package.json

any suggestions how do I fix this issue ?

Move assets into pubilc folder and try like import jsonData from '/assets/incomingData.json' — Niklesh Raut
@06011991 are you sure about that? Doesn't look like in the image. — yuriy636
@06011991 : so just check by using import jsonData from 'assets/incomingData.json' ? without .. double dot — Niklesh Raut

yuriy636 yuriy636 · Accepted Answer · 2018-01-05T12:30:44

The assets folder is at the same level as your App.vue file (which you are importing the json file from).

In order to import something from the same level, you start your import path with ./

import jsonData from './assets/incomingData.json'

If you don't use ./ webpack will try to find a package in node_modules named "assets", instead of a folder.

import json file in laravel in vue component

1 Answers