Tweet
Tweet

Slide 1

Slide 1 text

Nuxt Scriptsって何ができるの？ ~Nuxt4メインセッションに添えて~ 2024 author: GANGAN

Slide 2

Slide 2 text

始める前に… 2024 author: GANGAN

Slide 3

Slide 3 text

ペンライト持参しました Vue Fes の LTセッション風で進めます 2024 author: GANGAN

Slide 4

Slide 4 text

About me 2024 author: GANGAN

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

2024 author: GANGAN

Slide 7

Slide 7 text

2024 author: GANGAN

Slide 8

Slide 8 text

2024 author: GANGAN

Slide 9

Slide 9 text

2024 author: GANGAN

Slide 10

Slide 10 text

本日のタイトル 2024 author: GANGAN

Slide 11

Slide 11 text

Nuxt Scriptsって何ができるの？ ~Nuxt4メインセッションに添えて~ 2024 author: GANGAN

Slide 12

Slide 12 text

Nuxt Scriptsって何ができるの？ ~Nuxt4メインセッションに添えて~ 2024 author: GANGAN

Slide 13

Slide 13 text

Nuxt Scripts とは？ 2024 author: GANGAN

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

現在利用可能な 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

Slide 16

Slide 16 text

実際に触ってみます 今回は Youtube Player の実験を行います。 2024 author: GANGAN

Slide 17

Slide 17 text

実際に触ってみます scripts const isLoaded = ref(false); const isPlaying = ref(false); const video = ref(); const videoId = ref('QkhLzoEwvwM'); async function play() { await video.value.player.playVideo(); } function stateChange(event) { isPlaying.value = event.data === 1; } template
2024 author: GANGAN

Slide 18

Slide 18 text

2024 author: GANGAN

Slide 19

Slide 19 text

さいごに 2024 author: GANGAN

Slide 20

Slide 20 text

Nuxt Scripts ではベンチマークに協力してくれる 人を探しています Nuxt Scripts では実運用で実際に利用してくれるベンチマークユーザーを随時募集しています。 2024 author: GANGAN

Slide 21

Slide 21 text

新規スクリプト追加も随時リクエスト中 新規の追加リクエストも随時募集中です。 「このスクリプトの設定が便利になればええな」「これが追 加されると嬉しい」などございましたら是非コメントお願いします 🙏 2024 author: GANGAN

Slide 22

Slide 22 text

さいごに2 2024 author: GANGAN

Slide 23

Slide 23 text

コントリビューターも 随時募集中です。 一緒に 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

Slide 24

Slide 24 text

おしまい 2024 author: GANGAN