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

[Sualty]

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.

[johnleider]

There are a few options for using Vuetify. You can import the package into your current project and use it, as you did above. You could include the js file through cdn as well.

If your question is pertaining to only importing specific components, that's something coming with next release.

[Sualty]

I just want to import Vuetify in my existing project to use it. And it seems that I don't understand how to do it, since it doesn't work. I thought however having followed the steps in the readme...

[smares]

Do you really have [ ... ] as component in track-list.js? I mean, that is what your error says if you just copy-and-pasted it. And [ ... ] is obviously a placeholder. :)

[Sualty]

Of course not :) but I thought it wasn't important, so I didn't put it. I updated my first post. My module has also methods inside it, but, again ,I didn't put it here (I think it was just a problem of configuration, of me calling vuetify wrong). If you need to see more, feel free to ask :)

[nekosaur]

Please post the full error message. Exactly which component that is not being registered is very relevant.

[Sualty]

This error occurs for v-menu v-list v-list-tile v-list-tile-title

... all the vuetify tags which are used in the html.

[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.

[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