DCsunset / vuetify-markdown-editor

A Vue.js Component for editing and previewing markdown using Vuetify.js
MIT License
63 stars 17 forks source link

[Vue warn]: Unknown custom element: <> - did you register the component correctly? #6

Closed monoglo closed 4 years ago

monoglo commented 4 years ago
<template>
  <v-app>
    <navbar></navbar>
     This is the create article page.
    <markdown-editor
      mode="Rendered"
      ref="editor"
      hint="Test"
      nativeEmoji
      :outline="false"
      :preview="true"
      v-model="text"
      />
  </v-app>
</template>

<script>
import navbar from "../components/Navbar";
import { Editor } from "vuetify-markdown-editor";
import "vuetify-markdown-editor/dist/vuetify-markdown-editor.css";

export default {
  name: 'CreateArticlePage',
  components: {
    navbar,
    'markdown-editor': Editor,
  },
  data() {
    return {
      text: ''
    };
  },
  mounted() {
    // Access properties or methods using $refs
    //console.info(Vue.config.components)
    // this.$refs.editor.focus()
    // this.$refs.editor.upload();

    // Dark theme
    //this.$vuetify.theme.dark = true;
  }
};
</script>

That is my CreateArticlePage.vue in /views, vue cli. I have installed the module by npm install. Everything works fine during npm run serve... When open the web page, the editor is invisible, and the browser console output such errors.

[Vue warn]: Unknown custom element: \<v-container> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

[Vue warn]: Unknown custom element: \<v-row> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

[Vue warn]: Unknown custom element: \<v-col> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

etc.

I thought the key is I register the component wrongly. But I try for many times, like reinstall, import in global App.vue or man.js. Still get this trouble.

Besides, the cloned demo works all fine. I can only see the editor in that demo.

I have looking for solving for two days, but get noting. I am a noob of Vue and Vuetify, and this is my first issue in github. Can you give me some suggestions

DCsunset commented 4 years ago

Hello.

These errors occur probably because you haven't installed Vuetify correctly. Did you follow the steps in https://vuetifyjs.com/en/getting-started/quick-start to install it?

monoglo commented 4 years ago

Very thanks for replying.

The rest .vue files of my project works fine, all of them display the correct vuetify components. I followed https://vuetifyjs.com/en/getting-started/quick-start/#vue-cli-install with the vue cli command $ vue add vuetify to add the Vuetify Vue CLI package. May it's the problem lies in?


To find the problem, I create a new vue project with

$ vue create my-app
$ cd my-app
$ vue add vuetify
$ yarn add vuetify-markdown-editor
$ yarn serve

After I copy the https://github.com/DCsunset/vuetify-markdown-editor#usage to App.vue, still get same errors output.

DCsunset commented 4 years ago

After some tests, I found that v3.0.0 only works with Nuxt.js but not Vue CLI. Now this bug was fixed and v3.0.1 should work well with Vue CLI.

DCsunset commented 4 years ago

Besides, I've also updated the Usage in the README. The Usage before v3.0.1 was outdated.

monoglo commented 4 years ago

Very thanks.

Now it works fine in v3.0.1 Best wishes!