Skip to content
Advertisement

VueJS CDN import error. Uncaught TypeError. Vue Component is not a function

I’m trying to run this Reddit clone.

I imported different types of Vue CDNs,

<script src="https://unpkg.com/vue@next"></script>

Uncaught TypeError: Vue.component is not a function"

I’m not sure if I’m importing the wrong version of Vue, or if I have the wrong settings on jsfiddle.

var subreddit = Vue.component('subreddit',{
template: '#subreddit',
props: ['name'],

data: function () {
    return { posts: [] }
},

created: function(){
    this.$http.get("https://www.reddit.com/r/"+ this.name +"/top.json?limit=3")
    .then(function(resp){
        this.posts=resp.data.data.children;
    });
}
});

Full code here:

https://jsfiddle.net/jm0vs2kn/22/

Advertisement

Answer

Your script is pointing on the Vue version 3 @next which has some breaking changes in global API, to work with Vue 2 use the following CDN :

 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

You should also create a div inside the document body like <body><div id="app"></div> ... then mount the vue app like new Vue({el: '#app'});

Your x-templates should be defined outside the div with id app as follows :

 <script type="text/x-template" id="subreddit">
        <div class="subreddit">
            <h2>{{ name | uppercase }}</h2>
            <ul class="item-list">
                <li v-for="obj in posts">
                    <post :item="obj"></post>
                </li>
            </ul>
        </div>
    </script>

<div id="#app"> should be <div id="app">

and .then(function(resp){ should be an arrow function .then((resp)=>{

The example below uses axios to make ajax calls.

LIVE DEMO

Advertisement