Lifecycle Hooks called in wrong order

[Dan-Bird]

Describe the bug

A clear and concise description of what the bug is.

When I add a fetch() and a created() hook to a view, the fetch hook is called before the created.

In a regular Nuxt application, it looks like the created hook is called before the fetch hook.

What seems to be happening for me, is that the fetch hook is called and sets data on the component to the response from fetch. Then created is called and the data is reset to the initial value.

Screenshots

If applicable, add screenshots to help explain your problem.

This screenshot shows the order of hooks called within a normal Nuxt application. You can see the created hook is fired first, and the testData on the object is currently the initialised value of an empty array.

The fetch hook is then called, and it sets testData to be an array with a value.

Inspecting the vue instance after shows that testData is now set to be the array with a value.

---

This screenshot shows the same reproduction but inside nuxt-micro-frontend. Here you can see that the fetch hook is being called first, and that testData has not been initialised.

The created hook is then called after with the initialised value. Inspecting the Vue instance afterwards, you can see that testData is the initialised value. The hooks also seem to be getting called twice.

To Reproduce

Steps to reproduce the behavior:

1. Go to single-spa-demo > nuxt-subapp > views > home > index.vue
2. Add the hooks to the component:

<script>
export default {
  data() {
    return {
      testData: []
    };
  },
  async fetch() {
    console.log("fetch hook called, testData = ", this.testData);
    console.log("setting testData within fetch");
    this.testData = ["value"];
    console.log(
      "testData has been set within fetch, testData = ",
      this.testData
    );
  },
  created() {
    console.log("created hook called, testData = ", this.testData);
  },
  methods: {
    go2about() {
      this.$router.push({ name: "About" });
    },
    toast() {
      this.$sdk &&
        this.$sdk.toast({
          message: "来自 nuxt 触发的 toast",
          type: "success"
        });
    }
  }
};
</script>

3. Run the application and go to the view
4. See output in the console.

Expected behavior

A clear and concise description of what you expected to happen.

The created hook should be called first, before the fetch hook.

environment information

• Version 1.6.0
• OS: [e.g. macOS Big Sur]
• Browser: Any

[lianghx-319]

Maybe Nuxt core has changed. This module just copy the template from Nuxt client.js with specific version. And I think it should release a major version to sync Nuxt latest for Vue2?