Unknown custom element: [ ... ] - did you register the component correctly?

I’m getting this error for each html tag of Vuetify. I installed Vuetify using

npm install --save-dev vuetify

In my main.js I have :

const Vue = require("vue");
const Vuetify = require("vuetify");
const tracksList = require("./track-list.vue");

Vue.use(Vuetify);

trackList = new Vue({el: "#track-list", template: "<tracksList/>", components: {tracksList}});

The file track-list.vue is :

<template src="../templates/track-list-component.html"></template>
<script src="./track-list.js"></script>

In my template track-list-component.html, here is the part which uses Vuetify :

<div class="track-name-row"
                 v-on:click="expandTrack(project.structure.tracks.indexOf(track))"
                 @contextmenu="show">
                <li class="track-color-viewer"></li>
                <span>{{"Track "+project.structure.tracks.indexOf(track)}}</span>
                <img class="item-view" src="../assets/img/ic_view.svg" alt="view">
            </div>

            <v-menu offset-y v-model="showMenu" :position-absolutely="true" :position-x="x" :position-y="y">
                <v-list>
                    <v-list-tile>
                        <v-list-tile-title>test</v-list-tile-title>
                    </v-list-tile>
                </v-list>
            </v-menu>

The track-list.js is a simple Vue component :

//another component I am using : vuedraggable
const draggable = require("vuedraggable");

module.exports = {
    name: "track-list",
    components: {
            draggable
    },

    data() {
        return {
            //used for vuedraggable
            isDragging: false,
            //used for vuetify
            showMenu: false,
            x: 0,
            y: 0
        };
    }
}

For importing Vuetify, is there other things to do than installing Vuetify with npm and using Vue.use(Vuetify) in main.js? I am a bit lost and sad, this lib seems to be really great.

[nekosaur]

Aah, I totally missed that you were using require and not import.

When a module does this

export default function foo() {}

the resulting export becomes

{
  default: foo
}

When you import, it will automatically import the default property (unless you specify anything else). require does not do this automatically, which is why you need to specify .default

[Sualty]

I found the solution, someone of StackOverflow gave me a solution By changing const Vuetify = require("vuetify") to const Vuetify = require("vuetify").default

…it works. But I don’t really understand what happened here.Going to check.