How to get current component name in vue js 3.0

Question

I can get component name in vue js 2 by: this.$options.name. How to get it in vue js 3?

Thank you.

Answer 1

I managed to get component name at runtime like this:

<script setup lang="ts">
import {getCurrentInstance} from 'vue'

const componentName = getCurrentInstance()?.type.__name
</script>

Answer 2

Options API (IndexPageOptions.vue)

    <script>
    export default {
      name: 'IndexPageOptions',
      // created
      created () {
        console.log(this.$options.name + ': created')
      },
      mounted () {
        console.log(this.$options.name + ': mounted')
      }
    }
    </script>

Composition API (IndexPageComposition.vue)

    <script>
    // Imports
    import { defineComponent, onMounted, getCurrentInstance } from 'vue'
       
    export default defineComponent({
      name: 'IndexPageComposition',
      setup () {        
        // Created
        console.log(getCurrentInstance().type.name + ': created')
    
        onMounted(() => {
          console.log(getCurrentInstance().type.name + ': onMounted')
        })
      }
    })
    </script>

Script Setup (IndexPageScriptSetup.vue)

    <script setup>
    import { onMounted, getCurrentInstance } from 'vue'
    // Created
    console.log(getCurrentInstance().type.__name + ': created')
    
    onMounted(() => {
      console.log(getCurrentInstance().type.__name + ': onMounted')
    })
    </script>