16

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

Thank you.

5 Answers 5

7

I managed to get component name at runtime like this:

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

const componentName = getCurrentInstance()?.type.__name
</script>
Sign up to request clarification or add additional context in comments.

1 Comment

This sounds like a private/internal property that could change in future versions of Vue. And in fact, it does not appear to work (at least not via the Options API in the latest Vue version) as this.type is undefined.
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>

1 Comment

This does not appear to work in Vue 3.4 from my recent testing. $options.name no longer exists, nor does this.type.
0

Managed to get it using: this.$parent.componentName.

<script lang="ts">
import {Options, Vue} from 'vue-class-component';
import HelloWorld from '@/components/HelloWorld.vue';
import {Prop} from "vue-property-decorator";
import {Product} from "@/store/models";

@Options({
  components: {
    HelloWorld,
  },
  mounted() {
    this.$emit('init', this.$parent.componentName + ' mounted')
  },
  emits: ['init']
})
export default class Home extends Vue {

  @Prop(Array) private readonly products!: Product[];

}
</script>

Comments

0

None of the above answers worked for me...

This works (called from inside the component you want the name of):

console.log(this.$.type.name)

1 Comment

It seems that in Vue 3.4 there is no longer a name property.
-1
import { useRouter } from "vue-router";                                                                                                                   

In setup,

const router = useRouter();
const componentName  = router.currentRoute.value.name;

2 Comments

It get router name instead component name
Same for me ...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.