slugify + process.client>slugify, 브라우저 체크 로직 사용법

pages/instructor/blog/_id/edit.vue

@@ -17,11 +17,11 @@
               <div class="title">Once you publish blog you cannot change url to a blog.</div>
               <!-- Check for error -->
               <div v-if="!publishError">
-                <div class="subtitle">Current Url is:</div>
+                <div class="subtitle">This is how url to blog post will look like after publish:</div>
                 <article class="message is-success">
                   <div class="message-body">
                     <!-- Get here actual slug -->
-                    <strong>some-slug</strong>
+                    <strong>{{getCurrentUrl()}}/blogs/{{slug}}</strong>
                   </div>
                 </article>
               </div>
@@ -63,7 +63,9 @@
 import Editor from '~/components/editor'
 import Header from '~/components/shared/Header'
 import Modal from '~/components/shared/Modal'
-import { mapState } from "vuex";
+import { mapState } from "vuex"
+import slugify from 'slugify'
+
 export default {
   layout: 'instructor',
   components: {
@@ -71,7 +73,8 @@ export default {
   },
   data() {
     return {
-      publishError: ''
+      publishError: '',
+      slug: ''
     }
   },
   computed : {
@@ -107,11 +110,23 @@ export default {
     checkBlogValidity() {
       const title = this.$refs.editor.getNodeValueByName('title')
       this.publishError = ''
+      this.slug = ''
       if (title && title.length > 24) {
-        // create slug from title
+        this.slug = this.slugify(title)
       } else {
         this.publishError = 'Cannot publish! Title needs to be longer than 24 characters!'
       }
+    },
+    getCurrentUrl() {
+      // process.client will return true if we are in browser environment
+      return process.client && window.location.origin
+    },
+    slugify(text) {
+      return slugify(text, {
+        replacement: '-',
+        remove: null,
+        lower: true
+      })
     }
   }
 }