Nuxt UI Pro、NuxtHub、Nuxt Scripts、Nuxtエコシステムをふんだんに利用して開発するコーポレートサイト@Vue Fes Japan 2024

2024.10.19

Vue Fes Japan 2024 登壇資料

- イベントページ
- 株式会社FeaSion コーポレートサイト
- 参加レポート

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

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

Transcript

1. © 2024 FeaSion Corp. All rights reserved. 1 Nuxt UI Pro、NuxtHub、Nuxt Scripts、Nuxtエコシステムをふんだんに 利用して開発するコーポレートサイト 2024/10/19(Sat) Vue Fes Japan 2024 株式会社FeaSion GANGAN (@gangan_nikki)
2. © 2024 FeaSion Corp. All rights reserved. 2 皆さん
3. © 2024 FeaSion Corp. All rights reserved. 3 皆さん Vue Fes Japan 2024 は 楽しめましたか？ Did you enjoy Vue Fes Japan 2024?
4. © 2024 FeaSion Corp. All rights reserved. 4 楽しかったならなによりです I hope you had fun :)
5. © 2024 FeaSion Corp. All rights reserved. 5 あと1セッション、お付き合いください Please join us for last session
6. © 2024 FeaSion Corp. All rights reserved. 6 本セッションで話すこと
7. © 2024 FeaSion Corp. All rights reserved. 7 1. Nuxt および Nuxt エコシステムを利用した弊社の実事例について 2. Nuxt モジュールってどんな種類があるの？ 本セッションで話すこと
8. © 2024 FeaSion Corp. All rights reserved. 8 「Nuxtってこんなことが出来るんだ！」を 持って帰ってもらえればOKです
9. © 2024 FeaSion Corp. All rights reserved. 9 About me セクションタイトルの補足
10. © 2024 FeaSion Corp. All rights reserved. 10 • 岩丸慎平 ( いわまる しんぺい ) です • GANGAN / がんがん の名前で登壇や執筆をしています • 株式会社FeaSionのエンジニア です (FeaSion Corporation: Engineer job) • Nuxt core contributor、 Zenn Publication「Vue・Nuxt 情報が集まる広場 / Plaza for Vue・Nuxt」の Owner About me
11. © 2024 FeaSion Corp. All rights reserved. 11 I’m Nuxter
12. © 2024 FeaSion Corp. All rights reserved. 12 Do you know this community?
13. © 2024 FeaSion Corp. All rights reserved. 13 ちょこっとだけ弊社紹介
14. © 2024 FeaSion Corp. All rights reserved. 14 FeaSion‘s Philosophy / FeaSionの理念 ref: https://speakerdeck.com/feasion/feasion-shao-jie-zi-liao?slide=6
15. © 2024 FeaSion Corp. All rights reserved. 15 「いろは」は「い」から、「IT」は「あ」から ref: https://speakerdeck.com/feasion/feasion-shao-jie-zi-liao?slide=9
16. © 2024 FeaSion Corp. All rights reserved. 16 1. Nuxt および Nuxt エコシステムを 利用した弊社の実事例について Introducting Nuxt and Nuxt modules on our website.
17. © 2024 FeaSion Corp. All rights reserved. 17 弊社コーポレートサイト
18. © 2024 FeaSion Corp. All rights reserved. 18 アーキテクチャ構成: 現在の構成
19. © 2024 FeaSion Corp. All rights reserved. 19 アーキテクチャ構成: 今後の構成 • CMSとしてNewt、Zennを利用し、開発者以外もコンテンツ更新できる
20. © 2024 FeaSion Corp. All rights reserved. 20 アーキテクチャ構成: 現在の構成
21. © 2024 FeaSion Corp. All rights reserved. 21 Nuxt UI Pro とは? / What is Nuxt UI Pro?  Nuxt公式が提供するUIライブラリ『Nuxt UI』のPro版  Nuxt UIとの違いは？ ◼ UI Proは有償ライセンス。無償利用の場合はNuxt UI ◼ 無償版で利用できる40以上のコンポーネントに加え 50以上のコンポーネントを利用することが可能 ◆ eg.) Header component ◆ Hero Header component ◆ Footer component ◆ Pricing Card ◆ Auth Form ◆ BlogList ref: https://ui.nuxt.com/pro/pricing
22. © 2024 FeaSion Corp. All rights reserved. 22 Nuxt UI Pro とは? / What is Nuxt UI Pro?  Nuxt公式が提供するUIライブラリ『Nuxt UI』のPro版  Nuxt UIとの違いは？ ◼ UI Proは有償ライセンス。無償利用の場合はNuxt UI ◼ 無償版で利用できる40以上のコンポーネントに加え 50以上のコンポーネントを利用することが可能 ◆ eg.) Header component ◆ Hero Header component ◆ Footer component ◆ Pricing Card ◆ Auth Form ◆ BlogList ref: https://ui.nuxt.com/pro/pricing
23. © 2024 FeaSion Corp. All rights reserved. 23 Nuxt UI ・Nuxt UI Pro 技術構成 (Nuxt UI: v2)  Nuxt UIを構成する技術スタック ◼ Headless UI ◼ Tailwind CSS + Nuxt Tailwind module ◼ Nuxt ColorMode module : ライトモード / ダークモードの可変など ◼ VueUse ref: https://ui.nuxt.com/getting-started
24. © 2024 FeaSion Corp. All rights reserved. 24 Nuxt UI ・Nuxt UI Pro 技術構成 (Nuxt UI: v2)  Nuxt UIを構成する技術スタック ◼ Headless UI ◼ Tailwind CSS + Nuxt Tailwind module ◼ Nuxt ColorMode module : ライトモード / ダークモードの可変など ◼ VueUse ref: https://ui.nuxt.com/getting-started
25. © 2024 FeaSion Corp. All rights reserved. 25 Nuxt UI v2 → Nuxt UI v3
26. © 2024 FeaSion Corp. All rights reserved. 26 Nuxt UI v3-alpha.6 released (last week) ref: https://ui3.nuxt.dev/getting-started
27. © 2024 FeaSion Corp. All rights reserved. 27 Nuxt UI v3-alpha.6 released  Nuxt UIを構成する技術スタック ◼ Headless UI -> Radix Vue ◼ Tailwind CSS v4 + Nuxt Tailwind module ◼ Nuxt ColorMode module : ライトモード / ダークモードの可変など ◼ VueUse ref: https://ui.nuxt.com/getting-started
28. © 2024 FeaSion Corp. All rights reserved. 28 Radix Vue?
29. © 2024 FeaSion Corp. All rights reserved. 29 What is Radix Vue ?  Vue based component Library の1つ  特徴1: アクセシビリティを意識して開発  特徴2: Nuxt モジュールが公式から提供  特徴3: スタイル未設定 ◼ ユーザー側で任意のスタイルライブラリを利用できる ◼ 類似: Chakra UIが提供する Zag.js、Ark UI ref: https://www.radix-vue.com/
30. © 2024 FeaSion Corp. All rights reserved. 30 What is Radix Vue and shadcn-vue ?  Vue based component Library の1つ  特徴1: アクセシビリティを意識して開発  特徴2: Nuxt モジュールが公式から提供  特徴3: スタイル未設定 ◼ ユーザー側で任意のスタイルライブラリを利用できる ◼ 類似: Chakra UIが提供する Zag.js、Ark UI  スタイルを追加したshadcn-vueも提供 ◼ Tailwind CSSでスタイリングされている ref: https://www.radix-vue.com/
31. © 2024 FeaSion Corp. All rights reserved. 31 Nuxt UI Proをすぐに始めるには どうしたら良い？
32. © 2024 FeaSion Corp. All rights reserved. 32 テンプレートがあるよ  現在4種類のNuxt UI Proテンプレートが公開されています。 ref: https://ui.nuxt.com/pro/templates
33. © 2024 FeaSion Corp. All rights reserved. 33 弊社コーポレートサイト: Landing + SaaS template based
34. © 2024 FeaSion Corp. All rights reserved. 34 Nuxt UI Pro、NuxtHub、Nuxt Scripts、Nuxtエコシステムをふんだんに 利用して開発するコーポレートサイト 2024/10/19(Sat) Vue Fes Japan 2024 株式会社FeaSion GANGAN (@gangan_nikki)
35. © 2024 FeaSion Corp. All rights reserved. 35 What is NuxtHub ?
36. © 2024 FeaSion Corp. All rights reserved. 36 (再掲) アーキテクチャ構成: 今後の構成 • CMSとしてNewt、Zennを利用し、開発者以外もコンテンツ更新できる
37. © 2024 FeaSion Corp. All rights reserved. 37 What is NuxtHub ?  Nuxt公式が提供するCloudflareインフラ連携モジュール  Pages(Hosting)、D1(Database)、R2(Storage) などの Cloudflareインフラが最小コストで利用できる  NuxtHub templatesも多く存在する ref: https://hub.nuxt.com/
38. © 2024 FeaSion Corp. All rights reserved. 38 私はフロントエンドエンジニアなのに クラウド選定も任された。 AWS？Google Cloud？Azure？ 何を選べばいいの？
39. © 2024 FeaSion Corp. All rights reserved. 39 NuxtHub + Cloudflare
40. © 2024 FeaSion Corp. All rights reserved. 40 現在採用していない理由  地方をターゲットにする場合、クラウドやITに対する不安感が一定数存在する。 そのため、大半の方が利用するWindowsに寄せてMicrosoft Azureの社内採用を検討 => 社内スタックとプロダクトスタックを 分離して選定する方針とした ref: https://hub.nuxt.com/
41. © 2024 FeaSion Corp. All rights reserved. 41 What is NuxtHub ?  Nuxt 公式ブログに紹介記事があります ref: https://nuxt.com/blog/nuxt-scripts
42. © 2024 FeaSion Corp. All rights reserved. 42 Nuxt UI Pro、NuxtHub、Nuxt Scripts、 Nuxtエコシステムをふんだんに利用して開 発するコーポレートサイト 2024/10/19(Sat) Vue Fes Japan 2024 株式会社FeaSion GANGAN (@gangan_nikki)
43. © 2024 FeaSion Corp. All rights reserved. 43 What is Nuxt Script ?
44. © 2024 FeaSion Corp. All rights reserved. 44 What is Nuxt Scripts ?  Analytics、Tracking、Adsenseなどの3rd Party Scriptsの利用を便利にする公式モジュール  現在のNuxt Scriptsはベータ ステータス  Nuxt v3.12からNuxtにauto-installされている ref: https://scripts.nuxt.com/
45. © 2024 FeaSion Corp. All rights reserved. 45 Nuxt Scripts is どこ？
46. © 2024 FeaSion Corp. All rights reserved. 46 What is Nuxt Scripts ?  Analytics、Tracking、Adsenseなどの3rd Party Scriptsの利用を便利にする公式モジュール  現在のNuxt Scriptsはベータ ステータス  Nuxt v3.12からNuxtにauto-installされている ref: https://scripts.nuxt.com/
47. © 2024 FeaSion Corp. All rights reserved. 47 What is Nuxt Scripts ?  Nuxt 公式ブログに紹介記事があります ref: https://nuxt.com/blog/nuxt-scripts
48. © 2024 FeaSion Corp. All rights reserved. 48 Nuxtのauto imports 一覧を確認してみる  nuxt/packages/nuxt/src/imports/presets.ts  対応イシュー： https://github.com/nuxt/nuxt/pull/27010 ref: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/imports/presets.ts#L114-L143
49. © 2024 FeaSion Corp. All rights reserved. 49 (再掲) アーキテクチャ構成: 今後の構成 • CMSとしてNewt、Zennを利用し、開発者以外もコンテンツ更新できる
50. © 2024 FeaSion Corp. All rights reserved. 50 さて
51. © 2024 FeaSion Corp. All rights reserved. 51 水を飲みます 休憩しながら聞いてくださいね feel free to drink some water ;)
52. © 2024 FeaSion Corp. All rights reserved. 52 2. Nuxt モジュールってどんな種類があるの? What types of Nuxt modules are there?
53. © 2024 FeaSion Corp. All rights reserved. 53 Nuxt Modulesのサイトはご覧になったことありますか？ ref: https://nuxt.com/modules
54. © 2024 FeaSion Corp. All rights reserved. 54 Nuxt modules一覧のモジュールは3タイプ存在しています 1. 公式モジュール 2. 公式コミュニティモジュール 3. 3rd パーティーモジュール
55. © 2024 FeaSion Corp. All rights reserved. 55 Nuxt modules一覧のモジュールは3タイプ存在しています 1. 公式モジュール : Nuxt Organization で管理されている 2. 公式コミュニティモジュール 3. 3rd パーティーモジュール
56. © 2024 FeaSion Corp. All rights reserved. 56 Nuxt modules一覧のモジュールは3タイプ存在しています 1. 公式モジュール 2. 公式コミュニティモジュール : Nuxt Modules Organization で管理されている 3. 3rd パーティーモジュール よく利用されているモジュール  Nuxt I18n  Nuxt Tailwind  Nuxt ColorMode  Nuxt OG Image  Nuxt Storybook
57. © 2024 FeaSion Corp. All rights reserved. 57 Nuxt modules一覧のモジュールは3タイプ存在しています 1. 公式モジュール 2. 公式コミュニティモジュール 3. 3rd パーティーモジュール : ユーザーから追加されたモジュール
58. © 2024 FeaSion Corp. All rights reserved. 58 Nuxt modules一覧のモジュールは3タイプ存在しています 1. 公式モジュール 2. 公式コミュニティモジュール 3. 3rd パーティーモジュール : ユーザーから追加されたモジュール → ユーザー側でPRを作成し任意の追加が可能
59. © 2024 FeaSion Corp. All rights reserved. 59 Nuxt modules一覧のモジュールは3タイプ存在しています 1. 公式モジュール 2. 公式コミュニティモジュール 3. 3rd パーティーモジュール : ユーザーから追加されたモジュール → ユーザー側でPRを作成し任意の追加が可能 コミュニティときちんと会話を行い 合意を取った上でPR作成しよう。 コミュニティにはコミュニティの ロードマップが存在するから
60. © 2024 FeaSion Corp. All rights reserved. 60 よく利用されるNuxt Modulesを QA形式で話していきます
61. © 2024 FeaSion Corp. All rights reserved. 61 Q1. Linter 用のモジュールはありますか？
62. © 2024 FeaSion Corp. All rights reserved. 62 A1. Nuxt ESLint が利用可能です ref: https://eslint.nuxt.com/
63. © 2024 FeaSion Corp. All rights reserved. 63 A1. Nuxt ESLint が利用可能です ref: https://eslint.nuxt.com/  Nuxt ESLint は ESLint 用の公式モジュール  @nuxt/eslint、@nuxt/eslint-config、@nuxt/eslint-plugin は以下のような関係 @nuxt/eslint @nuxt/eslint-config: Nuxt で利用される設定集 @nuxt/eslint-plugin: Nuxt 固有のルール
64. © 2024 FeaSion Corp. All rights reserved. 64 A1. Nuxt2 packagesとの比較 ref: https://eslint.nuxt.com/guide/faq
65. © 2024 FeaSion Corp. All rights reserved. 65 Q2. State Managemant 用のモジュールはありますか？
66. © 2024 FeaSion Corp. All rights reserved. 66 A2. State Managemant 用のモジュールはありますか？  @pinia/nuxt  @nuxtjs/harlem Global state managemant として Nuxt3以降はVuexではなく Pinia を利用するユーザーが増えている ref: https://pinia.vuejs.org/ssr/nuxt.html
67. © 2024 FeaSion Corp. All rights reserved. 67 Q3. 国際化対応はどうすればよいか？
68. © 2024 FeaSion Corp. All rights reserved. 68 A3. Nuxt I18nを利用しましょう ref: https://i18n.nuxtjs.org/
69. © 2024 FeaSion Corp. All rights reserved. 69 A3. Nuxt I18nを利用しましょう  Nuxt2時代同様にNuxt I18nが利用可能  Nuxt3利用はv8 or latest  現在 v9 リリースに向けてアルファ版 (2weeks ago: v9.0.0-rc.2 relased) ref: https://i18n.nuxtjs.org/
70. © 2024 FeaSion Corp. All rights reserved. 70 Q4. モジュールではないがNuxtをより理解するにはどうすれば良いか？
71. © 2024 FeaSion Corp. All rights reserved. 71 A4. UnJS のリポジトリを覗いてみよう ref: https://unjs.io/
72. © 2024 FeaSion Corp. All rights reserved. 72 QAで扱ったモジュールは
73. © 2024 FeaSion Corp. All rights reserved. 73 QAで扱ったモジュールは いずれの作者も会場にいます
74. © 2024 FeaSion Corp. All rights reserved. 74 気になることは是非直接聞いてみてください
75. © 2024 FeaSion Corp. All rights reserved. 75 さいごに
76. © 2024 FeaSion Corp. All rights reserved. 76 皆さん Vue Fes Japan 2024 は 楽しめましたか？ Did you enjoy Vue Fes Japan 2024?
77. © 2024 FeaSion Corp. All rights reserved. 77 是非アフターパーティーで乾杯しましょう Let's toast!
78. © 2024 FeaSion Corp. All rights reserved. 78