Dynamic page creation with custom components

1

Is it possible to construct page dynamically with custom components which will be filled with some data that I request from server during the page load?

Something like

<template>
  <div class="page">
    <div class="page-content">
      <div>
        <p>Initial data</p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        serverData: {},
      }
    },
    methods: {

    },
    beforeMount () {
       this.serverData = RETRIEVE_DATA_FROM_SERVER
    }, 
    on: {
      pageBeforeIn: function (e, page) {
        ADD_TO_HTML_SINGLE_FILE_CUSTOM_COMPONENT_WITH_RETRIEVED_DATA
      }
    }
  }
</script>
2

Do you mean something like below? You can check if the component data is set, and otherwise show a loader. Then load your data from server, and update the component state. You should use this.$setState to properly update the component data. If you just set it manually like this.serverData = data you have to call this.$update() to force update the component.

Be

<template>
  <div class="page">
    <div class="page-content">
      <div>

        {{#if serverData}}

          <h1>{{serverData.title}}</h1>
          <p>{{serverData.content}}</p>

          <my-custom-component>
            <h1 slot="title">{{serverData.title}}</h1>
            <p slot="content">{{serverData.content}}</h1>
          </my-custom-component>

        {{else}}

          <p>Loading data...</p>

        {{/if}}

      </div>
    </div>
  </div>
</template>

<script>
  export default {
    on: {
      pageInit: function (e, page) {

        load_data_from_server(data => {
          this.$setState(data);
        });

      }
    }
  }
</script>
1 Like
3

Thank you for your answer, but I need something different. After I thought about my problem I decided that I need to load HTML templates on demand, then compile them with Template7 and then populate them with data I retrieved from server.