The initialization function is not being invoked

Question

The initialization function is not being invoked

I've set up a new project using vue ui with typescript, babel, and a linter. Everything seems to be working smoothly, except I'm running into some confusion with implementing the Composition API's setup method. For some reason, it doesn't seem to be getting called (no output in the log). I'm currently stuck on this issue.

vue: 3.0.0-rc.10

vue-cli: 4.5.4

<script lang="ts">
 import { Options, Vue } from 'vue-class-component'
 import HelloWorld from './components/HelloWorld.vue'

 @Options({
   components: {
     HelloWorld
   },
   setup () {
     console.log('SETUP HERE')
   }
 })
 export default class App extends Vue {
   setup () {
     console.log('SETUP THERE')
   }
 }
 </script>

typescript vue.js vuejs3 vue-composition-api vue-script-setup

Answer 1

Answer №1

To make use of the setup method from the vue-class-component library, you should follow these steps:

<template>
  <div>Count: {{ counter.count }}</div>
  <button @click="counter.increment()">+</button>
</template>

<script lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Vue, setup } from 'vue-class-component'

function useCounter () {
  const count = ref(0)

  function increment () {
    count.value++
  }

  onMounted(() => {
    console.log('onMounted')
  })

  return {
    count,
    increment
  }
}

export default class Counter extends Vue {
  counter = setup(() => useCounter())
}
</script>

For more information, you can refer to this link

Answer 2

To make use of the setup method from the vue-class-component library, you should follow these steps:

<template>
  <div>Count: {{ counter.count }}</div>
  <button @click="counter.increment()">+</button>
</template>

<script lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Vue, setup } from 'vue-class-component'

function useCounter () {
  const count = ref(0)

  function increment () {
    count.value++
  }

  onMounted(() => {
    console.log('onMounted')
  })

  return {
    count,
    increment
  }
}

export default class Counter extends Vue {
  counter = setup(() => useCounter())
}
</script>

For more information, you can refer to this link

Answer 3

Answer №2

I encountered a similar issue where extending the child component caused some complications. It seems that the composition API (setup method) is not invoked when extending a component, unlike the options API lifecycle hooks which are triggered in both components.

// child.js

<script>
import { onMounted } from "vue";

export default {
  name: "ChildComponent",
  setup() {
    console.log('Child - setup()');
    onMounted(() => {
      console.log('Child - mounted (composition API)');
    })
  },
  mounted() {
    console.log('Child - mounted (option API)');
  }
}
</script>

// parent.js

<script>
import ChildComponent from "./child.js";
import { onMounted } from "vue";

export default {
  name: "ParentComponent",
  extends: ChildComponent,
  setup() {
    console.log('Parent - setup()');
    onMounted(() => {
      console.log('Parent - mounted (composition API)');
    })
  },
  mounted() {
    console.log('Parent - mounted (option API)');
  }
}
</script>

OUTPUT

Parent - setup()
Parent - mounted (composition API)
Child - mounted (option API)
Parent - mounted (option API)

Answer 4

I encountered a similar issue where extending the child component caused some complications. It seems that the composition API (setup method) is not invoked when extending a component, unlike the options API lifecycle hooks which are triggered in both components.

// child.js

<script>
import { onMounted } from "vue";

export default {
  name: "ChildComponent",
  setup() {
    console.log('Child - setup()');
    onMounted(() => {
      console.log('Child - mounted (composition API)');
    })
  },
  mounted() {
    console.log('Child - mounted (option API)');
  }
}
</script>

// parent.js

<script>
import ChildComponent from "./child.js";
import { onMounted } from "vue";

export default {
  name: "ParentComponent",
  extends: ChildComponent,
  setup() {
    console.log('Parent - setup()');
    onMounted(() => {
      console.log('Parent - mounted (composition API)');
    })
  },
  mounted() {
    console.log('Parent - mounted (option API)');
  }
}
</script>

OUTPUT

Parent - setup()
Parent - mounted (composition API)
Child - mounted (option API)
Parent - mounted (option API)

The initialization function is not being invoked

Answer №1

Answer №2

Similar questions

Exploring the use of .pipe with Angular Jest for testing

A Error occurs if ReactQuill is used without defining the document object

Discover the secret to applying a gradient shade to the "border" element when it reaches full capacity with Vue's innovative Custom CSS package

How To Retrieve the Index of a Specific Row and Column in AgGrid (Angular)

Incorporate a 'Select All' functionality into ion-select by adding a dedicated button

Error Encountered: RSA Key Pairs Invalid Signature for JSON Web Token (JWT)

The process of dynamically loading and changing Vuetify Tabs is a dynamic and versatile feature

Issues with manipulating state using TypeScript Discriminated Unions"Incompatibility with setState

Creating Class Names Dynamically in Angular 2 Using ngFor Index

The 'RouterLink' JSX element type is missing any construct or call signatures

Enhance the appearance of Google Maps by incorporating gradient effects, box shadows, or other similar visual

"Vue.js Mustache Syntax: Beautifying Data Binding with Curly Br

Associating function parameters with object types in TypeScript

Error TS2322: Type 'Partial<T>' is not assignable to type 'T'

unable to locate the sw.js file in the Vue plugin PWA

What could be causing my if statement to fail even though the condition is met?

Guide on implementing the Translate service pipe in Angular 2 code

Struggling to access the properties of a Material-UI Button

Separate the string by commas, excluding any commas that are within quotation marks - javascript

Substituting JSON objects with alphabets