Nuxt and Vue social chat

Question

I installed the Vue social chat module into my Nuxt app but can't understand how the props and color settings work. Currently, everything is working fine, although the Whatsapp icon shown is black and the top bar is inside the speech bubble. How would I change this setting in Nuxt. The author says to use css variables but I don't know where to put these variables and how to use them in my code.

Nuxt doesn't have App.vue either, so I imported the module directly, which seems to work, but I'm not sure if I'm doing it correctly.

This is what my current default.vue page looks like. I won't import this module elsewhere.

<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>

Answer 1

This is mainly for overall needs

sssccc

We can also use --vsc-bg-button: Pink !important; instead of :root #social-button CSS selector, but I don’t like breaking CSS Specificity.
Alternatively, the style could be scoped but there's no real meaning here anyway since you won't run into any scoping issues here.

The github repository can be found here: https://github.com/kissu/vue-social

A working example of hosting is provided here: https://so-vue-social.netlify. app/