title: How can I correctly lazy load a json file in Vue.js to reduce bundle size?
body: <p>I am using Vue.js and Laravel for my project and recently added two animations using a plugin named Lottie. Each animation is a component, and they both use an individual JSON file to animate a group of PNG images (similar to a PNG sequence). These two JSON files are stored locally in the project folder under the path <strong>/public/data/</strong>.</p>
  
  <p>Firstly the JSON files are not being read unless I put in the absolute path (<strong>/users/username/documents/projectname/public/data/filename.json</strong>), is there no way I can get this to work just by using <strong>/data/filename.json</strong>?</p>
  
  <p>Secondly, when I add the code below in my component, my JS files are compiled to separate chunks as expected:</p>
  
  <pre><code>const animationData = () =&gt;
    import("/users/username/documents/projectname/public/data/filename.json");
  </code></pre>
  
  <p>I get the following error when the animation tries to run:</p>
  
  <pre><code>Invalid prop: type check failed for prop "data". Expected Object, got Function 
  
  found in
  
  ---&gt; &lt;VueLottie&gt;
  </code></pre>
  
  <p>However when I import my json file using a normal import in my component like below it works fine and shows the animation:</p>
  
  <pre><code>import animationData from "/users/username/documents/projectname/public/data/filename.json";
  </code></pre>
  
  <p>My animation components are both set up like this:</p>
  
  <pre><code>&lt;template&gt;
          &lt;vue-lottie ref="lottie" loop autoplay :data="animationData" :height="400" :width="400"&gt;&lt;/vue-lottie&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import vueLottie from "vue-lottie-ssr";
      import animationData from '/users/username/documents/projectname/public/data/filename.json'
  
      export default {
          name: 'animation',
          components: {
              vueLottie
          },
          data () {
              return {
                  speed: 1,
                  animationData
              }
          },
          computed: {
              lottie () {
                  return this.$refs.lottie
              }
          }
  
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>I have also tried getting the JSON file via an axios call when the component mounts, but the same error occurs.</p>
  
  <p><strong>Update</strong></p>
  
  <p>I updated my code so that each component is lazy loaded instead of the JSON file. Like so:</p>
  
  <pre><code>components: {
    WinAnimation: () =&gt; import("./WinAnimation.vue");
  
    LoseAnimation: () =&gt; import("./LoseAnimation.vue");
  }
  </code></pre>
  
  <p>However now I'm getting the following error:</p>
  
  <pre><code>Unknown custom element: &lt;win-animation&gt; - did you register the component correctly? For recursive components, make sure to provide the "name" option.
  </code></pre>
  
  <p><strong>Update 2</strong></p>
  
  <p>I realised why I was getting an error message. The correct way was to add the following at the top of my script inside the parent vue file.</p>
  
  <pre><code>const winAnimation = () =&gt; import("./WinAnimation.vue");
  const loseAnimation = () =&gt; import("./LoseAnimation.vue");
  </code></pre>
  
  <p>and then inside export default {...} I forgot to add the names, so:</p>
  
  <pre><code>components: { winAnimation, loseAnimation }
  </code></pre>
  
  <p>Now my code has been split and my app.js file size has reduced by almost a half! :) </p>