Nelle applicazioni Vue, ci sono due opzioni per incorporare codice HTML/javascript personalizzato:
Composition API
Options API
Per prima cosa, è necessario copiare il codice del widget:
Ora che hai copiato il tuo codice, dovrai separare l'HTML dal JavaScript. Ecco un esempio del nostro codice:
Codice Widget EmbedSocial:
<div class="embedsocial-hashtag" data-ref="a4f74f50d0016f41895f78a3141a52b07c6933aa"></div> <script> (function(d, s, id) { var js; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://embedsocial.com/cdn/ht.js"; d.getElementsByTagName("head")[0].appendChild(js); }(document, "script", "EmbedSocialHashtagScript")); </script>HTML
<div class="embedsocial-hashtag" data-ref="a4f74f50d0016f41895f78a3141a52b07c6933aa"></div
CSS
(function(d, s, id) { var js; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://embedsocial.com/cdn/ht.js"; d.getElementsByTagName("head")[0].appendChild(js); }(document, "script", "EmbedSocialHashtagScript")); Ora che hai il tuo codice, puoi proseguire con l'inclusione del widget nella tua applicazione Vue.
1. Incorporazione del widget tramite la Options API
Per inserire il codice del tuo widget in un'applicazione Vue che utilizza la Options API, segui i seguenti passaggi:
1. Apri la tua app Vue e crea un nuovo componente nella tua cartella dei componenti.
2. Incolla il codice HTML del tuo widget all'interno delle tag <template>:
3. Inserisci il codice JavaScript del tuo widget all'interno del lifecycle hook creato:
4. Contribuisci il componente che hai creato nel tuo sito. Puoi importare il componente e visualizzarlo sulla tua pagina, come mostrato di seguito:
Questo è il risultato ottenuto utilizzando la Options API con il widget EmbedSocial:
2. Composition API
La Composition API è un'aggiunta al framework Vue creata per affrontare le limitazioni dell'Options API utilizzata in Vue2.
Per inserire il codice del tuo widget in una applicazione Vue che utilizza la Composition API, segui i seguenti passaggi:
1. Apri la tua applicazione Vue e crea un nuovo componente nella tua cartella dei componenti.
2. Incolla il codice HTML del tuo widget all'interno delle tag <template>:
3. Importa onCreated dalla tua libreria e incolla il codice JavaScript del tuo widget all'interno di onCreated.
Ora che hai creato il componente per il tuo widget EmbedSocial, dovrai importare il componente e visualizzarlo sul tuo sito.
Apri il file/pagina dove vuoi visualizzare il tuo widget e importa il componente, in questo caso lo stiamo importando in App.vue:
Una volta eseguito, il tuo widget verrà visualizzato sul tuo sito.
Ecco il risultato ottenuto utilizzando la Composition API con il widget EmbedSocial:
Una volta fatto questo, il vostro widget verrà visualizzato sul vostro sito web.
Questo è tutto.
Se avete domande, cliccate sull'icona della chat in basso a destra per parlare con il nostro team di successo clienti o inviateci un'e-mail a support@embedsocial.com
Siamo qui per voi 🙏