CODEWITHSUNDEEP
vuejs2vue-component
zarpio
zarpio

Reputation: 7358

VueJs component using CDN link without npm

Want to use Laravel Vue Pagination

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

Upvotes: 2

Views: 817

Answers (1)

Luke
Luke

Reputation: 2400

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.

Upvotes: 2

Related Questions