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

by gangan

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

© 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

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

© 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

Slide 22

Slide 22 text

© 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

Slide 23

Slide 23 text

© 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

Slide 24

Slide 24 text

© 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

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

© 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

Slide 28

Slide 28 text

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

Slide 48

Slide 48 text

© 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

Slide 49

Slide 49 text

Slide 50

Slide 50 text

Slide 51

Slide 51 text

Slide 52

Slide 52 text

Slide 53

Slide 53 text

Slide 54

Slide 54 text

Slide 55

Slide 55 text

Slide 56

Slide 56 text

© 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

Slide 57

Slide 57 text

Slide 58

Slide 58 text

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

Slide 61

Slide 61 text

Slide 62

Slide 62 text

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

Slide 65

Slide 65 text

Slide 66

Slide 66 text

© 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

Slide 67

Slide 67 text

Slide 68

Slide 68 text

Slide 69

Slide 69 text

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