How to initialize a VUE component?

Question

Vue.js

I want to use VUE on the pages of the site, the component requires a lot of data from the database, and each page has its own data.
How to correctly build the initialization of the initial state of the component, without using ajax requests?

Answer 1

Well, in fact, the approach with window.__INITIAL_STATE__ is described here, you put json ready from the server into this variable from the server, and then you slip it into your state
https://ssr.vuejs.org/ru/guide/data.html

Answer 2

Well, you usually initialize the data by default, perhaps add a preloader state, and when your data from the database (or from somewhere else) comes, you replace

{
  template: `
    <div>
      <preloader v-if="!pageData" />
      <div v-else >
        ...
      </div>
    </div>
  `,

  data() {
    return {
      pageData: null
    }
  },

  async mounted() {
    this.pageData = await getData()
  }
}