Nuxt Scriptsって何ができるの？ Nuxt4メインセッションに添えて@Vue.js v-tokyo Meetup #21

2024.07.26
Vue.js v-tokyo Meetup #21 登壇資料

- Article ver.
- Event report

---
- 資料の中で登場したコミュニティ: Vue・Nuxt 情報が集まる広場 / Plaza for Vue・Nuxt.

Publicationのアサイン希望や執筆依頼などはGitHubの方からお願い致します: https://github.com/shinGangan/comm_vue_nuxt/issues

Transcript

1. Nuxt Scriptsって何ができるの？ ~Nuxt4メインセッションに添えて~ 2024 author: GANGAN
2. 始める前に… 2024 author: GANGAN
3. ペンライト持参しました Vue Fes の LTセッション風で進めます 2024 author: GANGAN
4. About me 2024 author: GANGAN
5. About me 岩丸慎平 (@gangan_nikki) AI Webアプリケーションの開発・運用やってました (Vue.js, Java, AWS, k8s, etc.) Nuxt contributor, Vue・Nuxt 情報が集まる広場 / Plaza for Vue・Nuxt. Publication Owner 2024 author: GANGAN
6. 2024 author: GANGAN
7. 2024 author: GANGAN
8. 2024 author: GANGAN
9. 2024 author: GANGAN
10. 本日のタイトル 2024 author: GANGAN
11. Nuxt Scriptsって何ができるの？ ~Nuxt4メインセッションに添えて~ 2024 author: GANGAN
12. Nuxt Scriptsって何ができるの？ ~Nuxt4メインセッションに添えて~ 2024 author: GANGAN
13. Nuxt Scripts とは？ 2024 author: GANGAN
14. Third-Party Scripts Meets Nuxt DX. Nuxt Scripts lets you load third-party scripts better performance, privacy, security and DX. It includes many popular third-parties out of the box. Public Preview 2024 author: GANGAN
15. 現在利用可能な Scripts Registry 項目 scripts total Analytics Plausible, Google, Cloudflare, Fathom, Matomo 5種類 Tracking Segment (Twilio Segment), Meta, X, Google Tag Manager 4種類 Adsense Google, Carbon 2種類 Marketing Hotjar, Clarity(Microsoft) 2種類 Support (live chatなど) Intercom, Crisp 2種類 Payments Stripe, Lemon Squeezy 2種類 現在の利用可能なものを一覧でまとめてみます。 2024 author: GANGAN
16. 実際に触ってみます 今回は Youtube Player の実験を行います。 2024 author: GANGAN
17. 実際に触ってみます scripts <scripts setup lang="ts"> const isLoaded = ref(false); const isPlaying = ref(false); const video = ref(); const videoId = ref<string>('QkhLzoEwvwM'); async function play() { await video.value.player.playVideo(); } function stateChange(event) { isPlaying.value = event.data === 1; } </scripts> template <template> <div class="flex items-center justify-center p-5"> <ScriptYouTubePlayer ref="video" :video-id @ready="isLoaded = true" @state-change="stateChange" /> </div> </template> 2024 author: GANGAN
18. 2024 author: GANGAN
19. さいごに 2024 author: GANGAN
20. Nuxt Scripts ではベンチマークに協力してくれる 人を探しています Nuxt Scripts では実運用で実際に利用してくれるベンチマークユーザーを随時募集しています。 2024 author: GANGAN
21. 新規スクリプト追加も随時リクエスト中 新規の追加リクエストも随時募集中です。 「このスクリプトの設定が便利になればええな」「これが追 加されると嬉しい」などございましたら是非コメントお願いします 🙏 2024 author: GANGAN
22. さいごに2 2024 author: GANGAN
23. コントリビューターも 随時募集中です。 一緒に Nuxter になり ませんか？ Third-Party Scripts Meets Nuxt DX. Nuxt Scripts lets you load third-party scripts better performance, privacy, security and DX. It includes many popular third-parties out of the box. Get started Star on GitHub 2024 author: GANGAN
24. おしまい 2024 author: GANGAN