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

© 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)

© 2024 FeaSion Corp. All rights reserved. 3 皆さん Vue
Fes Japan 2024 は楽しめましたか？ Did you enjoy Vue Fes Japan 2024?

© 2024 FeaSion Corp. All rights reserved. 4 楽しかったならなによりです I
hope you had fun :)

© 2024 FeaSion Corp. All rights reserved. 5 あと1セッション、お付き合いください Please
join us for last session

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

© 2024 FeaSion Corp. All rights reserved. 9 About me
セクションタイトルの補足

© 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

© 2024 FeaSion Corp. All rights reserved. 12 Do you
know this community?

© 2024 FeaSion Corp. All rights reserved. 14 FeaSion‘s Philosophy
/ FeaSionの理念 ref: https://speakerdeck.com/feasion/feasion-shao-jie-zi-liao?slide=6

© 2024 FeaSion Corp. All rights reserved. 15 「いろは」は「い」から、「IT」は「あ」から ref:
https://speakerdeck.com/feasion/feasion-shao-jie-zi-liao?slide=9

および Nuxt エコシステムを利用した弊社の実事例について Introducting Nuxt and Nuxt modules on our website.

© 2024 FeaSion Corp. All rights reserved. 19 アーキテクチャ構成: 今後の構成
• CMSとしてNewt、Zennを利用し、開発者以外もコンテンツ更新できる

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

・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

v2 → Nuxt UI v3

v3-alpha.6 released (last week) ref: https://ui3.nuxt.dev/getting-started

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

© 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/

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/

Proをすぐに始めるにはどうしたら良い？

© 2024 FeaSion Corp. All rights reserved. 32 テンプレートがあるよ 
現在4種類のNuxt UI Proテンプレートが公開されています。 ref: https://ui.nuxt.com/pro/templates

© 2024 FeaSion Corp. All rights reserved. 33 弊社コーポレートサイト: Landing
+ SaaS template based

Pro、NuxtHub、Nuxt Scripts、Nuxtエコシステムをふんだんに利用して開発するコーポレートサイト 2024/10/19(Sat) Vue Fes Japan 2024 株式会社FeaSion GANGAN (@gangan_nikki)

NuxtHub ?

© 2024 FeaSion Corp. All rights reserved. 36 (再掲) アーキテクチャ構成:
今後の構成 • CMSとしてNewt、Zennを利用し、開発者以外もコンテンツ更新できる

NuxtHub ?  Nuxt公式が提供するCloudflareインフラ連携モジュール  Pages(Hosting)、D1(Database)、R2(Storage) などの Cloudflareインフラが最小コストで利用できる  NuxtHub templatesも多く存在する ref: https://hub.nuxt.com/

© 2024 FeaSion Corp. All rights reserved. 38 私はフロントエンドエンジニアなのにクラウド選定も任された。
AWS？Google Cloud？Azure？何を選べばいいの？

© 2024 FeaSion Corp. All rights reserved. 39 NuxtHub +
Cloudflare

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

NuxtHub ?  Nuxt 公式ブログに紹介記事があります ref: https://nuxt.com/blog/nuxt-scripts

Pro、NuxtHub、Nuxt Scripts、 Nuxtエコシステムをふんだんに利用して開発するコーポレートサイト 2024/10/19(Sat) Vue Fes Japan 2024 株式会社FeaSion GANGAN (@gangan_nikki)

Nuxt Script ?

Nuxt Scripts ?  Analytics、Tracking、Adsenseなどの3rd Party Scriptsの利用を便利にする公式モジュール  現在のNuxt Scriptsはベータステータス  Nuxt v3.12からNuxtにauto-installされている ref: https://scripts.nuxt.com/

© 2024 FeaSion Corp. All rights reserved. 45 Nuxt Scripts
is どこ？

Nuxt Scripts ?  Analytics、Tracking、Adsenseなどの3rd Party Scriptsの利用を便利にする公式モジュール  現在のNuxt Scriptsはベータステータス  Nuxt v3.12からNuxtにauto-installされている ref: https://scripts.nuxt.com/

Nuxt Scripts ?  Nuxt 公式ブログに紹介記事があります ref: https://nuxt.com/blog/nuxt-scripts

© 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

© 2024 FeaSion Corp. All rights reserved. 49 (再掲) アーキテクチャ構成:
今後の構成 • CMSとしてNewt、Zennを利用し、開発者以外もコンテンツ更新できる

© 2024 FeaSion Corp. All rights reserved. 51 水を飲みます休憩しながら聞いてくださいね
feel free to drink some water ;)

モジュールってどんな種類があるの? What types of Nuxt modules are there?

1. 公式モジュール : Nuxt Organization で管理されている 2. 公式コミュニティモジュール 3. 3rd パーティーモジュール

1. 公式モジュール 2. 公式コミュニティモジュール : Nuxt Modules Organization で管理されている 3. 3rd パーティーモジュールよく利用されているモジュール  Nuxt I18n  Nuxt Tailwind  Nuxt ColorMode  Nuxt OG Image  Nuxt Storybook

1. 公式モジュール 2. 公式コミュニティモジュール 3. 3rd パーティーモジュール : ユーザーから追加されたモジュール

1. 公式モジュール 2. 公式コミュニティモジュール 3. 3rd パーティーモジュール : ユーザーから追加されたモジュール → ユーザー側でPRを作成し任意の追加が可能

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

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 固有のルール

© 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

I18nを利用しましょう ref: https://i18n.nuxtjs.org/

I18nを利用しましょう  Nuxt2時代同様にNuxt I18nが利用可能  Nuxt3利用はv8 or latest  現在 v9 リリースに向けてアルファ版 (2weeks ago: v9.0.0-rc.2 relased) ref: https://i18n.nuxtjs.org/

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

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

More Decks by gangan

Other Decks in Programming

Featured

Transcript