unplugin-vue-routerで実現する Nuxt 風ファイルベースルーティング

Slide 1

Slide 1 text

unplugin-vue-routerで実現する Nuxt 風ファイルベースルーティング 2024/10/17 Vue Fes Japan 2024 Pre LT Party

Slide 2

Slide 2 text

2 About me

Slide 3

Slide 3 text

Slide 4

Slide 4 text

4 本日のタイトル

Slide 5

Slide 5 text

5 unplugin-vue-routerで実現する Nuxt 風ファイルベースルーティング

Slide 6

Slide 6 text

6 unplugin-vue-routerで実現する Nuxt 風ファイルベースルーティング

Slide 7

Slide 7 text

7 unplugin-vue-router とは？

Slide 8

Slide 8 text

Slide 9

Slide 9 text

9 こんな経験ありませんか？

Slide 10

Slide 10 text

Slide 11

Slide 11 text

11 そんな悩みを解決するのが unplugin-vue-router です！

Slide 12

Slide 12 text

12 unplugin-vue-routerの主要機能

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

15 Copyright © 2015 every, Inc. All rights reserved. • 🛡 型安全性：ルーティングエラーを未然に防ぐ • ✅ ルート名とパスの自動補完 • 🔍 パラメータの型チェック • ⚠ 存在しないルートの即時検出 • 🤝 vue-router も unplugin-vue-router を推奨 • 💡 手動設定も可能だが、プラグインによる自動生成がおすすめ 🚀 コーディング時のミスを最小限に、開発効率を最大限に

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

19 Copyright © 2015 every, Inc. All rights reserved. • 📁 ファイルベースのルーティング：構造がそのままルートに • 🌳 ファイル構造に基づく自動ルート生成 • 🪆 ネストされたレイアウトの自然なサポート • 🔄 動的ルートの簡単な定義 • 🔍 ディレクトリ構造を見るだけでルート把握が可能に • 💡 複雑なルート設定が不要に！ 🚀 直感的な開発体験で、ルーティング構築の効率が大幅アップ

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

24 クイックスタート

Slide 25

Slide 25 text

Slide 26

Slide 26 text

26 unplugin-vue-router によって得られるもの

Slide 27

Slide 27 text

27 Copyright © 2015 every, Inc. All rights reserved. • 📈 開発効率の向上 • ルーティング設定の自動化 • 手動設定の手間を大幅に削減 • 🧠 認知負荷の軽減 • ファイル構造に集中するだけでOK • 複雑なルーティングロジックから解放 • 🔧 柔軟性の向上 • ファイルベースルーティングをVue.jsプロジェクトに • Nuxtライクな機能を単体の Vue.jsアプリケーションで実現