Nuxt.jsでSPAを実装してみた話

Developers.IO 2020 CONNECTで、Nuxt.jsを利用した開発を行っている方、もしくはこれから行う予定の初心者を対象に、デモを中心としてNuxt.jsの基本仕様を紹介するセッションを行いました。

Transcript

1. Nuxt.jsでSPAを実装してみた話 2020/7/3 加藤拓明（カトアキ） / @hirobel
2. 2 セッション内容 • Nuxt.jsの基本仕様 • SPAの構築⽅法 • デモ中⼼
3. 3 セッション内容 対象者 • Nuxt.jsを利⽤した開発を⾏っている、またはこれから⾏う予定 • 具体例（実際に動くコード）をベースに基本的な仕様を把握したい お話しないこと • assets、static、pluginディレクトリについて • Nuxt.jsと他のフレームワークの違いについて • SPAと他の動作モードの違いについて • Vue.js, vuexの基礎、ターミナルでの基本操作について
4. 4 ⾃⼰紹介 加藤拓明（カトウヒロアキ） a.k.a. カトアキ クラスメソッド株式会社 AWS事業本部 プロダクトグループ 好きなAWSサービス︓ Amazon S3、Amazon Redshift 好きなフレーズ︓ 「とりあえずやってみる」
5. 5 アジェンダ 1. Nuxt.jsのインストール 2. 必要な機能の実装 3. サブページに切り出す 4. コンポーネント化する 5. store化する 6. middleware化する 7. SPAとして公開する
6. DEMO
7. 7 アジェンダ 1. Nuxt.jsのインストール 2. 必要な機能の実装 3. サブページに切り出す 4. コンポーネント化する 5. store化する 6. middleware化する 7. SPAとして公開する
8. 8 DEMO
9. 9 アジェンダ 1. Nuxt.jsのインストール 2. 必要な機能の実装 3. サブページに切り出す 4. コンポーネント化する 5. store化する 6. middleware化する 7. SPAとして公開する
10. 10 DEMO
11. 11 アジェンダ 1. Nuxt.jsのインストール 2. 必要な機能の実装 3. サブページに切り出す 4. コンポーネント化する 5. store化する 6. middleware化する 7. SPAとして公開する
12. 12 DEMO
13. 13 アジェンダ 1. Nuxt.jsのインストール 2. 必要な機能の実装 3. サブページに切り出す 4. コンポーネント化する 5. store化する 6. middleware化する 7. SPAとして公開する
14. 14 DEMO
15. 15 アジェンダ 1. Nuxt.jsのインストール 2. 必要な機能の実装 3. サブページに切り出す 4. コンポーネント化する 5. store化する 6. middleware化する 7. SPAとして公開する
16. 16 DEMO
17. 17 アジェンダ 1. Nuxt.jsのインストール 2. 必要な機能の実装 3. サブページに切り出す 4. コンポーネント化する 5. store化する 6. middleware化する 7. SPAとして公開する
18. 18 DEMO
19. 19 まとめ • 段階的に適⽤できる • とりあえずやってみよ う