# Comment

Documentation and examples for comments.

To use the custom comments, import the Comment component 
import {Comment} from 'src/components'
1

Global usage

Vue.component(Comment.name, Comment)
1

For local usage

export default {
  components: {
    [Comment.name]: Comment
  }
}
1
2
3
4
5

# Example

Tim Picture
Tina Andrew · 7 minutes ago

Chance too good. God level bars. I'm so proud of @LifeOfDesiigner #1 song in the country. Panda! Don't be scared of the truth because we need to restart the human foundation in truth I stand with the most humility. We are so blessed!

All praises and blessings to the families of people who never gave up on dreams. Don't forget, You're Awesome!
Reply 243
Tim Picture
Olivia · Yesterday

Hello guys, nice to have you on the platform! There will be a lot of great stuff coming soon. We will keep you posted for the latest news.

Don't forget, You're Awesome!
Reply 25
Tim Picture
Emily · 2 Days Ago

Hello guys, nice to have you on the platform! There will be a lot of great stuff coming soon. We will keep you posted for the latest news.

Don't forget, You're Awesome!
Reply 243
Tim Picture
Andrew · 2 Days Ago

Hello guys, nice to have you on the platform! There will be a lot of great stuff coming soon. We will keep you posted for the latest news.

Don't forget, You're Awesome!
Reply 243 
<comment v-for="(comment, index) in comments"
         :key="comment.author + index"
         :author="comment.author"
         :date="comment.date"
         :avatar="comment.avatar"
         :comment="comment.comment"
         :replies="comment.replies">
    <template slot="actions">
        <el-tooltip content="Reply To Comment" placement="top">
            <a href="#pablo" class="btn btn-primary btn-neutral pull-right">
                <i class="now-ui-icons ui-1_send"></i> Reply
            </a>
        </el-tooltip>
        <a href="#pablo" :class="{'btn-default': !comment.liked}"
           class="btn btn-neutral pull-right">
            <i class="now-ui-icons ui-2_favourite-28"></i>
            {{comment.likes}}
        </a>
    </template>
</comment>

<script>
  import {Tooltip} from 'element-ui';

  export default {
    data() {
      return {
        comments: [
          {
            avatar: 'https://demos.creative-tim.com/vue-now-ui-kit-pro/img/marie.jpg',
            author: 'Tina Andrew',
            date: '7 minutes ago',
            comment: `<p>Chance too good. God level bars. I\'m so proud of @LifeOfDesiigner #1 song in the country. Panda! Don\'t be scared of the truth because we need to restart the human foundation in truth I stand with the most humility. We are so blessed!</p>
                                  <p>All praises and blessings to the families of people who never gave up on dreams. Don't forget, You're Awesome!</p>`,
            likes: 243,
            liked: true,
            replies: []
          },
          {
            avatar: 'https://demos.creative-tim.com/vue-now-ui-kit-pro/img/olivia.jpg',
            author: 'Olivia',
            date: 'Yesterday',
            comment: `<p>Hello guys, nice to have you on the platform! There will be a lot of great stuff coming soon. We will keep you posted for the latest news.</p>
                                  <p> Don't forget, You're Awesome!</p>`,
            likes: 25,
            liked: false,
            replies: [
              {
                avatar: 'https://demos.creative-tim.com/vue-now-ui-kit-pro/img/emily.jpg',
                author: 'Emily',
                date: '2 Days Ago',
                comment: `<p>Hello guys, nice to have you on the platform! There will be a lot of great stuff coming soon. We will keep you posted for the latest news.</p>
                                  <p> Don't forget, You're Awesome!</p>`,
                likes: 243,
                liked: true,
                replies: []
              },
            ]
          },
          {
            avatar: 'https://demos.creative-tim.com/vue-now-ui-kit-pro/img/james.jpg',
            author: 'Andrew',
            date: '2 Days Ago',
            comment: `<p>Hello guys, nice to have you on the platform! There will be a lot of great stuff coming soon. We will keep you posted for the latest news.</p>
                                  <p> Don't forget, You're Awesome!</p>`,
            likes: 243,
            liked: true,
            replies: []
          }
        ]

      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

# Slots

Name Description
avatar Custom slot for avatar
author Custom slot for author
date Slot to customize the date
comment Slot for comment
actions Slot to render different actions
replies Slot to render replies

← Date & Time Pickers →