nuxt アーカイブ - inokawablog

Nuxt導入のテンプレート

Nuxtを導入するにあたって今度のためにテンプレートが欲しかったので作っておく。 利用環境 エディター Nuxt VSCode 2.1.3 Docker フロントエンドとバックエンドを分離した構造にしている。これによりフロントエンド とバックエンドを柔軟に変更することができる。 Dockerfile # イメージ指定 FROM node:12.13.0-alpine WORKDIR /app # […]

Nuxt + TypeScriptのセットアップ

Nuxt + TypeScriptでセットアップを行います。 ディレクトリ構造はsrc/に主要なファイル群を配置しています。 導入 $ yarn add –dev @nuxt/typescript-build @nuxt/types @nuxt/typescript-runtime nuxt.config.ts 内の buildModules に @nuxt/typescript-build を […]

Nuxt + TypeScript に Stylelint + ESLint + Prettier を導入

Nuxtの環境にLinterとFormatterを導入して開発環境を快適にします。 prettier $ yarn add -D prettier VSCodeの設定 保存時自動整形の方が作業が捗るので、やりたい方は以下の設定を。 vscodeを使用している場合は,settings.jsonを以下のように設定すると保存時に自動で保存されます。 { "editor.formatOnSave […]

Nuxt のテストの実行環境を整える

Unitテスト・E2Eテスト・ビジュアルリグレッションテストの環境整備に関して書いていく。 Unit(単体)テスト Unitテストとはプログラムを構成する比較的小さな単位が個々の機能を正しく果たしているかどうかを検証するテストです。 関数単位でテストしたり、コンポーネント単位でテストしたりします。 Jestを使用します。 ライブラリのインストール $ yarn add -D jest ts-jes […]

Nuxt.jsでstylelintの設定をして快適なscss環境を。

stylelintは、コードに一貫性を持たせることができ、エラーを減らすことができます。またプロパティの並び順なども気にする必要がなくなります。また、prettierと組み合わせることでその真価を発揮します。 Stylelintの導入 事前にyarn create nuxt-app <project-name>でnuxtのプロジェクトを作成しておいてください。 nuxt: v2.13. […]

Nuxt + TypeScript + DockerのプロジェクトでStorybookの代わりを考える

Storybookとはコンポーネントがどのような挙動をするのかテストできたり、コンポーネントを一覧でみることのできるカタログのようなものです。 とても便利なStorybookですが、Nuxt + TypeScriptのプロジェクトに対して相性が悪く、導入しづらい部分があります。 さらにStorybook独自の書き方で記述しなければいけないので、しっかりと管理する体制が整っていれば良いのですが、そう […]

Nuxtでfirebaseを使う【Cloud Firestore】【Firebase Authentication】

Nuxtとデータベースと認証にfirebase(Cloud FirestoreとFirebase Authentication)を使用する場合に実装方法を紹介します。 アプリケーションからの呼び出しを簡単にするために、pluginとしてFirebaseのラッパーを登録します。 AuthとDatabaseで別々のファイルを作成しても良いのですが、記述量がそんなにないので1つのfirebase.jsフ […]

Nuxtのライフサイクルを完全に理解する

こちらの記事はvue.jsのライフサイクルを理解した上で読んでいただくとより一層理解が深まると思います。以下の記事を参考にしてください。 vue.jsのライフサイクルを完全に理解する Nuxtのライフサイクルを理解する 下の画像がnuxtのライフサイクルになっています。公式から拝借しました。 nuxtServerInit middleware validate asyncData / fetch […]