title: How to handle Vue component content before data has finished loading
body: <p>I'm loading some product category data from Prismic into my Nuxt project, and I'm looking for some clarification regarding best practices. Specifically, how to handle the state in which the data is still being fetched, and there's no content to display in the sidebar.</p>
  <p>Right now, here's what I've got working:</p>
  <p>I have a sidebar component (<code>Sidebar.vue</code>):</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;div class=&quot;xl:flex-shrink-0 xl:w-64 border-r border-gray-200 pt-5 pb-4 bg-white overflow-y-auto &quot;&gt;
          &lt;h3 class=&quot;text-xl font-bold text-gray-800&quot;&gt;{{ navigation.heading }}&lt;/h3&gt;
          &lt;div class=&quot;mt-5 flex-grow flex flex-col&quot;&gt;
              &lt;nav class=&quot;flex-1 px-2 space-y-1 bg-white&quot; aria-label=&quot;Sidebar&quot;&gt;
              &lt;div v-for=&quot;(category, index) in navigation.categories&quot; :key=&quot;index&quot;&gt;
                  &lt;SidebarItem v-if=&quot;!category.subcategories.length&quot; :category=&quot;category&quot;/&gt;
  
                  &lt;SidebarSection v-else-if=&quot;category.subcategories.length&quot; @click=&quot;toggleExpansion(index)&quot; :category=&quot;category&quot;/&gt;
              &lt;/div&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
  export default {
      data() {
          return {
              navigation: new Navigation('Categories')
          }
      },
      async mounted() {
          const that = this
          this.fetchCategories()
              .then(function() {
                  that.navigation = that.$store.getters.navigation
              })
      },
      methods: {
          ...mapActions({ fetchCategories: 'fetchCategories' })
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p>As you can see, I have a <code>navigation</code> property which will contain all of the data required to populate the sidebar. At the moment, I have initialised a placeholder instance (<code>new Navigation('Categories')</code>), as without this, Vue reports that <code>navigation</code> is undefined.</p>
  <p>This doesn't feel like an ideal way to go about this. What would be the most appropriate way to handle this intermediary state before the data is loaded, without providing a placeholder instance?</p>