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

2.2K Views

October 17, 24

#Vue.js #unplugin-vue-router #ファイルベースルーティング #型安全 #Nuxt.js

スライド概要

naoki haba

@NaokiHaba

スライド一覧

Software engineer

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

ダウンロード(pdf - 1.03MB)

関連スライド

VueUse__5分で分かる_Vue.js_開発の効率化術_

naoki haba 486

チームで始める_テスト文化のススメ

naoki haba 371

不具合に立ち向かうテスト戦略 ~ NestJSで作るCI環境 ~

naoki haba 142

猫でも分かるUnreal Engineの学び方 - 超初心者向け編 - 2023 v1.0

ue4 ue5 ue-beginner

エピックゲームズジャパン 1.3M

Unreal Engine5 Lumenの仕組みと肝心なところ

ue5 ue-rendering ue-lumen

エピックゲームズジャパン 1.1M

最新の6.0で学ぶ！初めてのひとのためのSpring Security

java spring security

tada 1M

各ページのテキスト

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

About me 2

本日のタイトル 4

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

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

unplugin-vue-router とは？ 7

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

10.

11.

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

12.

unplugin-vue-routerの主要機能 12

13.

14.

15.

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

16.

17.

18.

19.

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

20.

21.

22.

23.

24.

クイックスタート 24

25.

26.

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

27.

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

28.

注意点 28

29.

30.

31.

32.