VueJs component using CDN link without npm

Question

HTML

<ul>
    <li v-for="user in users.data" :key="user.id">{{ user.name }}</li>
</ul>
<pagination :data="users" @pagination-change-page="getUsers"></pagination>

Vue/Js

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/laravel-vue-pagination.umd.min.js"></script>
<script>
new Vue({
    el: '#app',
    data: {
        users: [],       
    },
    mounted() {
        this.getUsers();
    },
    methods: {
        getThoughts(page = 1) {
            axios.get('/api/users?page=' + page)
                .then(response => {
                    this.users = response.data;
                });
        }
    }
});
</script>

Problem: Loop is working fine when using the pagination component gives me the following error.

Error

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

Tried

Vue.component('pagination', require('laravel-vue-pagination'));

Gives me following error

Uncaught ReferenceError: require is not defined

Luke · Accepted Answer · 2020-05-14 09:32:33Z

2

You are loading a component using UMD modules. When loading a UMD module through script tag, the module gets added to the window object. You can access it using window['module-name']. Then you need to register the component in Vue object just like u would do it normally.

In your case you need to add:

      components: {
        pagination: window['laravel-vue-pagination']
      },

to your Vue component so umd module laravel-vue-pagination will be registered and ready to use inside template.

edited May 14, 2020 at 9:32

answered May 14, 2020 at 9:02

Luke

2,4006 gold badges27 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJs component using CDN link without npm

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related