V-chat-scroll with vue.js and framework7

Good afternoon
I’m trying to implement v-chat-scroll into my room.vue without success.

my current code looks like that.

<f7-block strong class= "room">
  <!-- Get roomcontent.message from Component message.vue -->
    <ul v-chat-scroll="{always: false, smooth: true, scrollonremoved:true, smoothonremoved: false}">
      <li v-for="value in roomcontent.message" :key=value.index>@{{ value }}</li>
      <li v-if="loading">&bull;&bull;&bull;</li>


  <input type="text" class="form-control" name="message_input" placeholder="Type your message" v-model='message' @keyup.enter='send'>

I’ve got this in app.js

// Import custom component and add it in new Vue to render it
import Message from '../components/message.vue';
import VueChatScroll from 'vue-chat-scroll';

// Init Framework7-Vue Plugin
let newapp = null
firebase.auth().onAuthStateChanged(function(user) {
  console.log('user in app.js',user)
    console.log('check in app.js')
    if ( user.emailVerified) {

    } else {
      // No user is signed in.

    newapp = // Init App
    new Vue({
      el: '#app',

      render: (h) => h(App),
      // Register App Component
      components: {
        app: App,
        // Load custom components that have been imported
        message: Message,

and this in message.vue




  export default {
    mounted() {
      console.log('Component message mounted.')

could you help me to understand why doesn’t it run ?

Thank you


Maybe some live example or JSFiddle? It is not clear what is happening and what is exactly doesn’t work

Hi Vladimir,
It could be easier and quicker for me to share my screen or my project repo
Any slot available to schedule a meeting ?

Try recording your screen and posting a YouTube link

1 Like

v-scroll video
does it help or do you need something else ? @kerrydp @nolimits4web ?
The v-scroll should automaticaly scroll-down to the last bottom message and it does not.
Thank you

here you have,

change it to your needs

Thank you @pvtallulah,
i’m currently trying to implement it with f7
I’m not such familiar with yet, could you provide some help in order to make me autonomous ?
Currently, the app does not failed to compiled, but does not display anything :frowning:
Thank you

kind of difficult what you are asking. you just share one view. did it work with dev?

Hello @pvtallulah
I understand,
currently I’m working on the following integration error

which leads to

// Init Messages
    messages: undefined.messages.create({
      el: '.messages',
      // First message rule
      firstMessageRule: function firstMessageRule(message, previousMessage, nextMessage) {
        // Skip if title
        if (message.isTitle) return false;
        /* if:
          - there is no previous message
          - or previous message type (send/received) is different
          - or previous message sender name is different

        if (!previousMessage || previousMessage.type !== message.type || previousMessage.name !== message.name) return true;
        return false;

which should be a miss declaration here (no “var” to declare which f7 / vue framework)

  on: {
    init () {

      // Init Messagebar
      var messagebar = this.messagebar.create({
        el: '.messagebar'

      // Response flag
      var responseInProgress = false;

      // Send auto-response Message
      this.$('.send-link').on('click', function () {
        var text = messagebar.getValue().replace(/\n/g, '<br>').trim();
        // return if empty message
        if (!text.length) return;

        // Clear area

        // Return focus to area

        // Add message to messages
          text: text,

        if (responseInProgress) return;
        // Receive dummy message

I could be available to share my screen for a call or a chat if you’re available also, let me know.

Thank you for taking time to already answer =)

replace this with app

Thanks =)
I’m going to continue debug

Could we plan a call during next days ?

can you console.log(this) and console.log(app) and show the results here

Hello @pvtallulah

they are all undefined.
It would be easier in a chat or in a call then post our conclusion here
Would you be available ?

Thank you


If this is undefined, your problem is outside your web-app…

if this is not undefined, then you can get your messagebar using:
this.$f7.messagebar.create... or this.$f7.messagebar.get... in Framework7Vue…

But without a fiddle it’s hard to tell

Hello @tiptronic
I’m available whenever you want for screensharing during a call
Thank you for your support

Hey @AmauryVanEspen ,

I think you will get a quicker solution if you prepare a jsfiddle… Most of the people here (including me) are pretty busy with their own day-work, so chances for a one-to-one sessions are not good…

1 Like