title: Vue.js Vuetify.js - Unknown custom element: <v-list-item>, <v-list-item-title> did you register the component correctly?
body: <p>I copied code from <a href="https://vuetifyjs.com/en/components/data-iterators#filter" rel="nofollow noreferrer">Vuetify Data Iterator Filter part</a></p>
  
  <p>I can use other Vuetify components like <code>v-btn</code>, <code>v-card</code>, <code>v-data-table</code>, <code>v-data-iterator</code>, etc.</p>
  
  <p>Only <code>&lt;v-list-item&gt;</code> and <code>&lt;v-list-item-title&gt;</code> throw errors.</p>
  
  <p>I have no idea what is going on.</p>
  
  <p>Error messages:</p>
  
  <blockquote>
    <p>[Vue warn]: Unknown custom element: <code>&lt;v-list-item&gt;</code> - did you register
    the component correctly? For recursive components, make sure to
    provide the "name" option</p>
    
    <p>[Vue warn]: Unknown custom element: <code>&lt;v-list-item-title&gt;</code> - did you
    register the component correctly? For recursive components, make sure
    to provide the "name" option.</p>
  </blockquote>
  
  <p>HTML:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="container"&gt;
      &lt;v-container fluid grid-list-md style="padding: 0"&gt;
        &lt;v-data-iterator
          :items="items"
          :items-per-page.sync="itemsPerPage"
          :page="page"
          :search="search"
          :sort-by="sortBy.toLowerCase()"
          :sort-desc="sortDesc"
          hide-default-footer
        &gt;
          &lt;template v-slot:header&gt;
            &lt;v-toolbar dark color="blue darken-3" class="mb-1"&gt;
              &lt;v-text-field
                v-model="search"
                clearable
                flat
                solo-inverted
                hide-details
                prepend-inner-icon="search"
                label="Search"
              &gt;&lt;/v-text-field&gt;
              &lt;template v-if="$vuetify.breakpoint.mdAndUp"&gt;
                &lt;v-spacer&gt;&lt;/v-spacer&gt;
                &lt;v-select
                  v-model="sortBy"
                  flat
                  solo-inverted
                  hide-details
                  :items="keys"
                  prepend-inner-icon="search"
                  label="Sort by"
                &gt;&lt;/v-select&gt;
                &lt;v-spacer&gt;&lt;/v-spacer&gt;
                &lt;v-btn-toggle v-model="sortDesc" mandatory&gt;
                  &lt;v-btn large depressed color="blue" :value="false"&gt;
                    &lt;v-icon&gt;arrow_upward&lt;/v-icon&gt;
                  &lt;/v-btn&gt;
                  &lt;v-btn large depressed color="blue" :value="true"&gt;
                    &lt;v-icon&gt;arrow_downward&lt;/v-icon&gt;
                  &lt;/v-btn&gt;
                &lt;/v-btn-toggle&gt;
              &lt;/template&gt;
            &lt;/v-toolbar&gt;
          &lt;/template&gt;
  
          &lt;template v-slot:default="props"&gt;
            &lt;v-layout wrap&gt;
              &lt;v-flex v-for="item in props.items" :key="item.name" xs12 sm6 md4 lg3&gt;
                &lt;v-card&gt;
                  &lt;v-card-title class="subheading font-weight-bold"&gt;{{ item.name }}&lt;/v-card-title&gt;
  
                  &lt;v-divider&gt;&lt;/v-divider&gt;
  
                  &lt;v-list dense&gt;
                    &lt;v-list-item
                      v-for="(key, index) in filteredKeys"
                      :key="index"
                      :color="sortBy === key ? `blue lighten-4` : `white`"
                    &gt;
                      &lt;v-list-item-content&gt;{{ key }}:&lt;/v-list-item-content&gt;
                      &lt;v-list-item-content class="align-end"&gt;{{ item[key.toLowerCase()] }}&lt;/v-list-item-content&gt;
                    &lt;/v-list-item&gt;
                  &lt;/v-list&gt;
                &lt;/v-card&gt;
              &lt;/v-flex&gt;
            &lt;/v-layout&gt;
          &lt;/template&gt;
  
          &lt;template v-slot:footer&gt;
            &lt;v-layout mt-2 wrap align-center justify-center&gt;
              &lt;span class="grey--text"&gt;Items per page&lt;/span&gt;
              &lt;v-menu offset-y&gt;
                &lt;template v-slot:activator="{ on }"&gt;
                  &lt;v-btn dark text color="primary" class="ml-2" v-on="on"&gt;
                    {{ itemsPerPage }}
                    &lt;v-icon&gt;keyboard_arrow_down&lt;/v-icon&gt;
                  &lt;/v-btn&gt;
                &lt;/template&gt;
                &lt;v-list&gt;
                  &lt;v-list-item
                    v-for="(number, index) in itemsPerPageArray"
                    :key="index"
                    @click="updateItemsPerPage(number)"
                  &gt;
                    &lt;v-list-item-title&gt;{{ number }}&lt;/v-list-item-title&gt;
                  &lt;/v-list-item&gt;
                &lt;/v-list&gt;
              &lt;/v-menu&gt;
  
              &lt;v-spacer&gt;&lt;/v-spacer&gt;
  
              &lt;span class="mr-4 grey--text"&gt;Page {{ page }} of {{ numberOfPages }}&lt;/span&gt;
              &lt;v-btn fab dark color="blue darken-3" class="mr-1" @click="formerPage"&gt;
                &lt;v-icon&gt;keyboard_arrow_left&lt;/v-icon&gt;
              &lt;/v-btn&gt;
              &lt;v-btn fab dark color="blue darken-3" class="ml-1" @click="nextPage"&gt;
                &lt;v-icon&gt;keyboard_arrow_right&lt;/v-icon&gt;
              &lt;/v-btn&gt;
            &lt;/v-layout&gt;
          &lt;/template&gt;
        &lt;/v-data-iterator&gt;
      &lt;/v-container&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>export default {
    data() {
      return {
        itemsPerPageArray: [4, 8, 12],
        search: "",
        filter: {},
        sortDesc: false,
        page: 1,
        itemsPerPage: 4,
        sortBy: "name",
        keys: [
          "Name",
          "Calories",
          "Fat",
          "Carbs",
          "Protein",
          "Sodium",
          "Calcium",
          "Iron"
        ],
        items: [
          {
            name: "Frozen Yogurt",
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            sodium: 87,
            calcium: "14%",
            iron: "1%"
          },
          {
            name: "Ice cream sandwich",
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            sodium: 129,
            calcium: "8%",
            iron: "1%"
          },
          {
            name: "Eclair",
            calories: 262,
            fat: 16.0,
            carbs: 23,
            protein: 6.0,
            sodium: 337,
            calcium: "6%",
            iron: "7%"
          },
          {
            name: "Cupcake",
            calories: 305,
            fat: 3.7,
            carbs: 67,
            protein: 4.3,
            sodium: 413,
            calcium: "3%",
            iron: "8%"
          },
          {
            name: "Gingerbread",
            calories: 356,
            fat: 16.0,
            carbs: 49,
            protein: 3.9,
            sodium: 327,
            calcium: "7%",
            iron: "16%"
          },
          {
            name: "Jelly bean",
            calories: 375,
            fat: 0.0,
            carbs: 94,
            protein: 0.0,
            sodium: 50,
            calcium: "0%",
            iron: "0%"
          },
          {
            name: "Lollipop",
            calories: 392,
            fat: 0.2,
            carbs: 98,
            protein: 0,
            sodium: 38,
            calcium: "0%",
            iron: "2%"
          },
          {
            name: "Honeycomb",
            calories: 408,
            fat: 3.2,
            carbs: 87,
            protein: 6.5,
            sodium: 562,
            calcium: "0%",
            iron: "45%"
          },
          {
            name: "Donut",
            calories: 452,
            fat: 25.0,
            carbs: 51,
            protein: 4.9,
            sodium: 326,
            calcium: "2%",
            iron: "22%"
          },
          {
            name: "KitKat",
            calories: 518,
            fat: 26.0,
            carbs: 65,
            protein: 7,
            sodium: 54,
            calcium: "12%",
            iron: "6%"
          }
        ]
        // value: true
      };
    },
    computed: {
      numberOfPages() {
        return Math.ceil(this.items.length / this.itemsPerPage);
      },
      filteredKeys() {
        return this.keys.filter(key =&gt; key !== `Name`);
      }
    },
    methods: {
      nextPage() {
        if (this.page + 1 &lt;= this.numberOfPages) this.page += 1;
      },
      formerPage() {
        if (this.page - 1 &gt;= 1) this.page -= 1;
      },
      updateItemsPerPage(number) {
        this.itemsPerPage = number;
      }
    },
  };
  </code></pre>
  
  <p>Output screenshot:</p>
  
  <p>As you can see, other components are working well...</p>
  
  <p><a href="https://i.stack.imgur.com/KzFzr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KzFzr.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p>I read the <a href="https://vuetifyjs.com/en/getting-started/quick-start" rel="nofollow noreferrer">Vuetify Quick Start</a> again and make sure I install Vuetify correctly.</p>
  
  <p>Below is <code>src\plugins\vuetify.js</code> file</p>
  
  <pre><code>import Vue from 'vue'
  import Vuetify from 'vuetify/lib'
  import 'vuetify/src/stylus/app.styl'
  
  Vue.use(Vuetify, {
    iconfont: 'md',
  })
  </code></pre>
  
  <p>and <code>src\main.js</code></p>
  
  <pre><code>import Vue from "vue";
  import firebase from './components/firebaseInit';
  import App from "./App.vue";
  import router from "./router";
  import vuetify from './plugins/vuetify' // path to vuetify export
  
  Vue.config.productionTip = false;
  
  let app = '';
  
  // initialize the Vue app only when we are sure Firebase is initialized
  firebase.auth().onAuthStateChanged(() =&gt; {
    if (!app) {
      app = new Vue({
        vuetify,
        router,
        render: h =&gt; h(App)
      }).$mount("#app");    
  
    }
  });
  </code></pre>
  
  <hr>
  
  <p>I tried to import the components manually but still, the same errors occurred:</p>
  
  <pre><code>import { VListItem, VListItemTitle } from "vuetify/lib";
  
  export default {
    components: {
      'v-list-item': VListItem,
      'v-list-item-title': VListItemTitle
    },
  ...
  }
  </code></pre>
  
  <hr>
  
  <p>I also tried:</p>
  
  <ol>
  <li>Remove <code>.node_modules</code> folder</li>
  <li>Run <code>npm update</code></li>
  <li>Run <code>npm install</code></li>
  </ol>
  
  <p>Still the same errors. I also searched a lot of related posts but no luck.</p>