$30 off During Our Annual Pro Sale. View Details »

Nuxt UI Pro、NuxtHub、Nuxt Scripts、Nuxtエコシステムをふんだ...

gangan
October 19, 2024

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

gangan

October 19, 2024
Tweet

More Decks by gangan

Other Decks in Programming

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. 3 皆さん Vue

    Fes Japan 2024 は 楽しめましたか? Did you enjoy Vue Fes Japan 2024?
  3. © 2024 FeaSion Corp. All rights reserved. 7 1. Nuxt

    および Nuxt エコシステムを利用した弊社の実事例について 2. Nuxt モジュールってどんな種類があるの? 本セッションで話すこと
  4. © 2024 FeaSion Corp. All rights reserved. 9 About me

    セクションタイトルの補足
  5. © 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
  6. © 2024 FeaSion Corp. All rights reserved. 14 FeaSion‘s Philosophy

    / FeaSionの理念 ref: https://speakerdeck.com/feasion/feasion-shao-jie-zi-liao?slide=6
  7. © 2024 FeaSion Corp. All rights reserved. 16 1. Nuxt

    および Nuxt エコシステムを 利用した弊社の実事例について Introducting Nuxt and Nuxt modules on our website.
  8. © 2024 FeaSion Corp. All rights reserved. 19 アーキテクチャ構成: 今後の構成

    • CMSとしてNewt、Zennを利用し、開発者以外もコンテンツ更新できる
  9. © 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
  10. © 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
  11. © 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
  12. © 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
  13. © 2024 FeaSion Corp. All rights reserved. 26 Nuxt UI

    v3-alpha.6 released (last week) ref: https://ui3.nuxt.dev/getting-started
  14. © 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
  15. © 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/
  16. © 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/
  17. © 2024 FeaSion Corp. All rights reserved. 31 Nuxt UI

    Proをすぐに始めるには どうしたら良い?
  18. © 2024 FeaSion Corp. All rights reserved. 32 テンプレートがあるよ 

    現在4種類のNuxt UI Proテンプレートが公開されています。 ref: https://ui.nuxt.com/pro/templates
  19. © 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)
  20. © 2024 FeaSion Corp. All rights reserved. 36 (再掲) アーキテクチャ構成:

    今後の構成 • CMSとしてNewt、Zennを利用し、開発者以外もコンテンツ更新できる
  21. © 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/
  22. © 2024 FeaSion Corp. All rights reserved. 40 現在採用していない理由 

    地方をターゲットにする場合、クラウドやITに対する不安感が一定数存在する。 そのため、大半の方が利用するWindowsに寄せてMicrosoft Azureの社内採用を検討 => 社内スタックとプロダクトスタックを 分離して選定する方針とした ref: https://hub.nuxt.com/
  23. © 2024 FeaSion Corp. All rights reserved. 41 What is

    NuxtHub ?  Nuxt 公式ブログに紹介記事があります ref: https://nuxt.com/blog/nuxt-scripts
  24. © 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)
  25. © 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/
  26. © 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/
  27. © 2024 FeaSion Corp. All rights reserved. 47 What is

    Nuxt Scripts ?  Nuxt 公式ブログに紹介記事があります ref: https://nuxt.com/blog/nuxt-scripts
  28. © 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
  29. © 2024 FeaSion Corp. All rights reserved. 49 (再掲) アーキテクチャ構成:

    今後の構成 • CMSとしてNewt、Zennを利用し、開発者以外もコンテンツ更新できる
  30. © 2024 FeaSion Corp. All rights reserved. 52 2. Nuxt

    モジュールってどんな種類があるの? What types of Nuxt modules are there?
  31. © 2024 FeaSion Corp. All rights reserved. 54 Nuxt modules一覧のモジュールは3タイプ存在しています

    1. 公式モジュール 2. 公式コミュニティモジュール 3. 3rd パーティーモジュール
  32. © 2024 FeaSion Corp. All rights reserved. 55 Nuxt modules一覧のモジュールは3タイプ存在しています

    1. 公式モジュール : Nuxt Organization で管理されている 2. 公式コミュニティモジュール 3. 3rd パーティーモジュール
  33. © 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
  34. © 2024 FeaSion Corp. All rights reserved. 57 Nuxt modules一覧のモジュールは3タイプ存在しています

    1. 公式モジュール 2. 公式コミュニティモジュール 3. 3rd パーティーモジュール : ユーザーから追加されたモジュール
  35. © 2024 FeaSion Corp. All rights reserved. 58 Nuxt modules一覧のモジュールは3タイプ存在しています

    1. 公式モジュール 2. 公式コミュニティモジュール 3. 3rd パーティーモジュール : ユーザーから追加されたモジュール → ユーザー側でPRを作成し任意の追加が可能
  36. © 2024 FeaSion Corp. All rights reserved. 59 Nuxt modules一覧のモジュールは3タイプ存在しています

    1. 公式モジュール 2. 公式コミュニティモジュール 3. 3rd パーティーモジュール : ユーザーから追加されたモジュール → ユーザー側でPRを作成し任意の追加が可能 コミュニティときちんと会話を行い 合意を取った上でPR作成しよう。 コミュニティにはコミュニティの ロードマップが存在するから
  37. © 2024 FeaSion Corp. All rights reserved. 61 Q1. Linter

    用のモジュールはありますか?
  38. © 2024 FeaSion Corp. All rights reserved. 62 A1. Nuxt

    ESLint が利用可能です ref: https://eslint.nuxt.com/
  39. © 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 固有のルール
  40. © 2024 FeaSion Corp. All rights reserved. 64 A1. Nuxt2

    packagesとの比較 ref: https://eslint.nuxt.com/guide/faq
  41. © 2024 FeaSion Corp. All rights reserved. 65 Q2. State

    Managemant 用のモジュールはありますか?
  42. © 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
  43. © 2024 FeaSion Corp. All rights reserved. 68 A3. Nuxt

    I18nを利用しましょう ref: https://i18n.nuxtjs.org/
  44. © 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/
  45. © 2024 FeaSion Corp. All rights reserved. 71 A4. UnJS

    のリポジトリを覗いてみよう ref: https://unjs.io/
  46. © 2024 FeaSion Corp. All rights reserved. 76 皆さん Vue

    Fes Japan 2024 は 楽しめましたか? Did you enjoy Vue Fes Japan 2024?