I'm trying to add Vuetify to my project following the steps described here: https://next.vuetifyjs.com/en/getting-started/installation/#manual-steps

But I get this warning message:

[Vue warn]: Failed to resolve component: v-table
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

I share my implementation:

TestComponent.vue

<template>
  <v-table>
    <thead>
      <tr>
        <th>Name</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="app in stuff" :key="app.name">
        <td>{{app.name}}</td>
      </tr>
    </tbody>
  </v-table>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';

@Options({
  props: {
    msg: String,
    stuff: Object,
  },
})
export default class Debugger extends Vue {
  msg!: string;
  stuff!: {name: string, id: number, [key: string]: unknown}[];

  title = 'a title';
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

</style>

App.vue

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>
</template>

<style lang="scss">

</style>

CodePudding user response：

I just forgot to add my instance of vuetify to my app:

Before

createApp(App).use(store).use(router).mount('#app');

After

createApp(App)
  .use(store)
  .use(router)
  .use(vuetify)
  .mount('#app');

main.ts

import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

const vuetify = createVuetify({
  components,
  directives,
})

createApp(App)
  .use(store)
  .use(router)
  .use(vuetify)
  .mount('#app');