pagination example

Author: winrid

README.md

@@ -53,10 +53,18 @@ export default Vue.extend({
 ## Updating The Current Page (SPA Example)
 
 In FastComments we call the article id, or page the comments get tied to, the URL ID as it can be a url or an ID.
-Define the URL ID in the following manner. The component watches for changes in config object, and will reload, so you can update the URL ID.
+Define the URL ID in the following manner. The component watches for changes in config object, and will reload, so you can just update the "url" and "urlId" settings.
+
+See a full working example [here](dev/serve-pagination.ts).
+
+Run the pagination example via:
+
+```
+npm run serve-pagination
+```
 
 ```vue
-<fast-comments-vue v-bind:config="{tenantId: 'demo', urlId: 'some-page-id'}" />
+<fast-comments-vue v-bind:config="{tenantId: 'demo', url: 'https://example.com', urlId: 'some-page-id'}" />
 ```
 
 

dev/serve-dark-mode-toggle.vue

@@ -3,7 +3,7 @@
     import FastCommentsVue from '@/fastcomments-vue.vue';
 
     export default Vue.extend({
-        name: 'ServeDev',
+        name: 'ServeDarkModeToggle',
         components: {
             FastCommentsVue
         },

dev/serve-pagination.ts

@@ -0,0 +1,23 @@
+import Vue, { VNode } from 'vue';
+import Dev from './serve-pagination.vue';
+import Router from 'vue-router';
+
+Vue.config.productionTip = false;
+
+const routes = [
+  {
+    path: '/demo',
+    component: Dev
+  }
+];
+
+const router = new Router({
+  routes
+});
+
+Vue.use(Router);
+
+new Vue({
+  router,
+  render: (h): VNode => h(Dev),
+}).$mount('#app');

dev/serve-pagination.vue

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import Vue from 'vue';
+    import FastCommentsVue from '@/fastcomments-vue.vue';
+
+    export default Vue.extend({
+        name: 'ServePagination',
+        components: {
+            FastCommentsVue
+        },
+        methods: {
+          updatePage: function(pageNumber: number) {
+            this.$router.push('/demo#page-' + pageNumber);
+            this.page = pageNumber;
+          }
+        },
+        data() {
+            return {
+                page: 0,
+                url: null
+            }
+        },
+        watch: {
+            $route() {
+              this.url = window.location.href;
+            }
+        }
+    });
+</script>
+
+<template>
+    <div id="app">
+        <div>Page: <span v-html="page"></span></div>
+        <button @click="updatePage(page - 1)" style="margin-right: 5px">Prev</button>
+        <button @click="updatePage(page + 1)">Next</button>
+        <fast-comments-vue v-bind:config="{tenantId: 'nYrnfYEv', urlId: url, url: url}"/>
+    </div>
+</template>