SPAモードのNuxt.jsにツイッターのウィジェットを埋め込み、ページ遷移の度に初期化する 🐦

mounted で window.twttr.widgets.load を実行すればOKです。

nuxt.config.js

export default {
  mode: 'spa',
  head: {
    script: [{
      src: 'https://platform.twitter.com/widgets.js'
    }]
  }
}

ウィジェットを埋め込んだコンポーネント

<script lang="ts">
  import { Component, Vue } from 'nuxt-property-decorator';

  declare global {
    interface Window {
      twttr: any
    }
  }

  @Component({})
  export default class Twitter extends Vue {
    mounted() {
      if (process.client) {
        window!.twttr!.widgets!.load();
      }
    }
  }
</script>

TypeScriptで書いていますが、イメージはこんな感じです。



Next.jsバージョンはこちら

blog.kimizuka.org