CODEWITHSUNDEEP
javascriptvue.js
Roly Poly
Roly Poly

Reputation: 559

VueJS giving me an "unknown custom element" error despite mimicking a working component

I have a small vueJS app started. It's just a .html file and a .js file. Inside the HTML, I'm linking to the JS file to get my Vue components. Everything about the component seems to be in working order as far as I can tell: I literally copied the form of another component which I copied from a tutorial. So it should work, but it doesn't, or at least I can't tell why it shouldn't work.

Here is my code. The HTML:

// this is in main_step09.js
Vue.component('headline-roly', {
  props: ['title', 'body', 'date'],
  template: `
        <div>
            <h1>Today's Headline: {{ title }}</h1>
            <p>{{ body }}</p>
            <h6>Reported on: {{ date }}</h6>
        </div>
    `
});

new Vue({ el: '#root' })
<!-- actually in <head> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css">

<div id="root" class="container">
  <headline-roly title="In The News" body="lorem ipsum" date="10/16/2019"></headline-roly>
  <headline-roly title="This Just In" body="CTV News reporting" date="12/20/2019"></headline-roly>
  <headline-roly title="Spider-Man!" body="The daily bugle" date="01/16/3019"></headline-roly>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>

<!-- this is where main_step09.js is included in the actual code
<script src='main_step09.js'>


</script>
-->

I don't see what I'm doing wrong. It even works in a JS Fiddle: https://jsfiddle.net/j15x32fp/

But in the browser I get the error:

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

Anyone help?

Upvotes: 1

Views: 974

Answers (2)

Roly Poly
Roly Poly

Reputation: 559

Hey all: The solution ended up being a little strange. I restarted my computer, reinstalled my Windows 10 OS, and found that main_step09.js was ... oh.

I had the code for the Vue component sitting in the wrong file. There was a duplicate titled "main_step09-testing.js" where I had the code written.

Stupid. Oh well

Upvotes: 0

Benjamin Goldsbury
Benjamin Goldsbury

Reputation: 11

Your script doesn't know what a headline-roly is because you commented out the <script> tag for main_step09.js, where headline-roly is defined.

Upvotes: 1

Related Questions