Nuxt.js
概要 Nuxtにはミドルウェアという機構がある。 ミドルウェアを使うと、ページがレンダリングされる前に、実行されるカスタム関数を定義できる。 複数のページでミドルウェアを実行するには3つ方法がある。 nuxt.config.js でrouterに読み込ませる layoutでミ…
Nuxt.jsでWebSocketを使ってみる。 バックエンドはexpress-templateを使ってExpressで用意する。（Nuxt.jsはWebSocketのクライアントとして使う） su-kun1899.hatenablog.com サーバ側 nuxt-expressテンプレートを使っていることを前提とする。 ExpressでWeb…
jestでVuexのmapMutationが Unexpected token on mapMutations なエラーになってしまう。 ...mapMutations の ... がbabelによってエラーになってしまっているようだ。 ... はスプレッド演算子（object rest spread operator）というらしい。 解決方法 スプ…
Nuxt.jsはsrcディレクトリやrootディレクトリにエイリアスがついており、importなどではそれを使用する。 こんな感じで。 import child from '@/components/Child' しかしjestでテストを書こうとした場合に、パスが解決出来なくてエラーになってしまう。 Can…
概要 vue-cliから作れるNuxt.jsのテンプレートに、express-templateというのがある。 Nuxt.jsと同時にExpressを起動させて、バックエンドとして動かすことが可能。 Nuxt.js内でバックエンドのMockを作って動かせるので、フロントエンドとバックエンドの開発…
概要 Nuxt.jsのプロジェクトをCircleCIで動かしてみる config.ymlの作成 Nodeプロジェクト用ののテンプレートを利用してconfig.ymlを作成する プロジェクトルートから .circleci/config.yml を作る。 $ mkdir .circleci $ touch .circleci/config.yml config…
複数コンポーネントで状態管理をするのに便利らしいVuexを使ってみた。 Vuexストアに状態管理を任せて、各コンポーネントはストア経由で状態変更することで、状態変更を一元管理できるっぽい。 ja.nuxtjs.org ストアの作成 store/sample.js を作成する。 sto…
概要 http://localhost:3000/sample?hoge=abc123 のようにRequestされた場合に、 abc123 を画面に表示してみる asyncDataを使う pageコンポーネントの場合、asyncDataというメソッドを使うと、Context経由でリクエストの情報を取得できる。 asyncDataはレン…
Nuxt.jsには静的ファイルの生成がサポートされており、成果物を静的ファイルとしてホスティングできるようになる。 開発中など、この静的ファイルをNuxt.jsに依存させないで確認したいときに、http-serverを使うと便利。 静的ファイルの生成 vue-cliから作成…
概要 Nuxt.jsで、jestというテスティングフレームワークを使って、コンポーネントのテストを書いてみました。 facebook.github.io 準備 ※vue-cli でNuxt.jsのプロジェクトは作成済とします。 jest-vue-preprocessorをインストールします。 たぶんVueとjestを…
概要 とりあえずNuxt.jsはVSCodeで書いてみてるんだけど、フォーマットをかけるとエラーになってしまう。 前提 Veturというプラグインを入れています。 github.com 結論 Prettierプラグインを入れる。 github.com VSCodeの設定に下記を追加する。 "prettier.…
vue-cliからテンプレートプロジェクトを作ると、ディレクトリがいくつも作られるのだが、それぞれの役割についてわかったこと。 基本的には↓に書いてあるけど。 ja.nuxtjs.org テンプレートプロジェクトを作る $ vue init nuxt-community/starter-template n…
Next.js とか Nuxt.js とかって何よ Next.js: React アプリケーションをサーバーサイドレンダリングするためのフレームワーク Nuxt.js: Vue.js アプリケーションをサーバーサイドレンダリングするためのフレームワーク サーバーサイドレンダリングって何よ q…
