How to get current component name in vue js 3.0

Viewed 1621

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

Thank you.

3 Answers

I managed to get component name at runtime like this:

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

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

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>
import { useRouter } from "vue-router";                                                                                                                   

In setup,

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