Instalé el móduloVue Social Chat en mi aplicación Nuxt y tuve problemas para entender cómo funcionan los accesorios y la configuración de color. Actualmente todo funciona bien, aunque el ícono de WhatsApp que se muestra es negro, así como la barra superior situada dentro de la burbuja de diálogo. ¿Cómo haría para cambiar esto en Nuxt. El autor dice que use variables css, pero no tengo idea de dónde colocarlas y cómo usarlas en mi código.
Nuxt tampoco tiene App.vue, así que importé el módulo directamente, lo que parece funcionar, pero no estoy seguro de hacerlo correctamente.
Así es como se ve mi página default.vue actual. No importo el módulo a ningún otro lugar.
<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>Esto es principalmente lo que se necesita en general
<template> <div class="layout"> <nuxt /> <social-chat id="social-button" icon :attendants="attendants"> <p slot="header"> Click on one of our attendants below to chat on WhatsApp. </p> <template #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> </social-chat> </div> </template> <script> import { SocialChat } from 'vue-social-chat' export default { name: 'DefaultLayout', components: { SocialChat, }, data() { return { attendants: [ { app: 'whatsapp', label: 'Technical support', name: 'Alan Ktquez', number: '5581983383532', avatar: { src: 'https://avatars0.githubusercontent.com/u/8084606?s=460&u=20b6499a416cf7129a18e5c168cf387e159edb1a&v=4', alt: 'Alan Ktquez avatar', }, }, ], } }, } </script> <style> :root #social-button { --vsc-bg-header: orange; --vsc-bg-footer: #fafafa; --vsc-text-color-header: yellow; --vsc-text-color-footer: green; --vsc-bg-button: pink; --vsc-text-color-button: purple; --vsc-outline-color: #333; --vsc-border-color-bottom-header: teal; --vsc-border-color-top-footer: #f3f3f3; } </style> En lugar del selector de CSS :root #social-button , es posible que hayamos usado --vsc-bg-button: pink !important; también, pero no me gusta destruir la especificidad de CSS.
Además, el estilo puede tener scoped , pero de todos modos no hay ninguna implicación aquí porque no tendrá ningún problema de alcance aquí.
Puede encontrar un repositorio de github aquí: https://github.com/kissu/vue-social
Y un ejemplo de trabajo alojado disponible aquí: https://so-vue-social.netlify.app/