Saya memasang modul sembang sosial Vue ke dalam apl Nuxt saya tetapi tidak dapat memahami cara tetapan prop dan warna berfungsi. Pada masa ini, semuanya berfungsi dengan baik, walaupun ikon Whatsapp yang ditunjukkan berwarna hitam dan bar atas berada di dalam gelembung pertuturan. Bagaimanakah saya akan menukar tetapan ini dalam Nuxt. Penulis berkata untuk menggunakan pembolehubah css tetapi saya tidak tahu di mana untuk meletakkan pembolehubah ini dan cara menggunakannya dalam kod saya.

Nuxt juga tidak mempunyai App.vue, jadi saya mengimport modul secara langsung, yang nampaknya berfungsi, tetapi saya tidak pasti sama ada saya melakukannya dengan betul.

Beginilah rupa halaman default.vue semasa saya. Saya tidak akan mengimport modul ini di tempat lain.

<template>
  <v-app dark>
    <v-main>
      <Nuxt />
    </v-main>
    <div>
      <SocialChat
        icon
        :attendants="attendants"
      >
        <p slot="header" >Chat to us on whatsapp for any question, or sales related topics.</p>
        <template v-slot:button>
          <img
            src="https://raw.githubusercontent.com/ktquez/vue-social-chat/master/src/icons/whatsapp.svg"
            alt="icon whatsapp"
            aria-hidden="true"
          >
        </template>
        <small slot="footer">Opening hours: 8am to 6pm</small>
      </SocialChat>
    </div>
  </v-app>
</template>

<script>
import { SocialChat } from 'vue-social-chat'

export default {
  name: 'DefaultLayout',
  components: {
    SocialChat
  },
  data() {
    return {
      attendants: [
        {
          app: 'whatsapp',
          label: '',
          name: '',
          number: '',
          avatar: {
            src: '',
            alt: ''
          }
        },
        // ...
      ],
    }
  },
}
</script>

<style>
.container {
  max-width: 1200px;
}
</style>