【登壇資料】Nuxt.jsでSPAを実装してみた話 #devio2020

2020.07.10

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは。カトアキです。

Developers.IO 2020 CONNECTで、「Nuxt.jsでSPAを実装してみた話」をテーマにお話をしました。

Developers.IO 2020 CONNECT全オンラインセッションのご紹介

セッション概要

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

動画

登壇スライド

お話したこと

以下の流れで、ブランクの状態から少しづつNuxt.jsを取り入れていき、プログラムを改善していく様子を説明しました。 デモパートでは開発の流れを疑似体験できるように、終始エディタを移しっぱなしにして、ライブコーディング的に説明しました。

  1. Nuxt.jsのインストール
  2. 必要な機能の実装
  3. サブページに切り出す
  4. コンポーネント化する
  5. store化する
  6. middleware化する
  7. SPAとして公開する

おわりに

僕はNuxt.jsについてサンプル等を動かしながら勉強しましたが、基本的な仕様を確認するまでですら途中で何度もエラーが発生して心が折れそうになりました。そこで自分と同じ様に初歩サンプルの再現に悩んでいる方や、何かしら参考になる方がいるのではないかと思って、ライブ開発(感)にこだわった、デモメインのセッションをやってみました。

挫折したらこれみちゃえばほぼ初歩サンプルを動かしてみたのと同じような経験値がアップするんじゃないでしょうか、と期待してます。

誰かの参考になればとてもうれしいです。