nuxt

ESLint ルール追加したいお気持ち

今のルール 追加検討したルール レビュー max-lines-per-function max-statements max-depth 追加ルール no-else-return 結論 その他 既存の Nuxt プロジェクトに ESLint のルールを追加した時に調べたことを整理しました。 Lint の設定ファイルを秘伝のタレ…

<template> に存在していない Vue コンポーネントを動的に追加

利用ケース メモ $el new Bar() or new Vue() ? 生成した Vue インスタンス内で Router などが使えない Vue インスタンスを作成して $mount すればおk。 add() { const instance = new Bar({ propsData: { date: new Date().valueOf() } }) .$on("click", da…

ESLint の設定 (Nuxt TypeScript)

Nuxt で開発する時の ESLint の設定ファイルです。Nuxt のバージョンは 2.10 です。 前提 設定ファイル ESLint の設定ファイルを読む 基本知識 実際に適用されるルールを確認 設定ファイルを拡張する extends 命名規則 @nuxtjs/eslint-config-typescript い…

Nuxt のモジュールをテストする

モジュール本体 テストの方針 (WIP) テストファイル 参考 以下のような構成のモジュールをつくったとして、テストをどのように書くことができるか整理します。 . ├── README.md ├── __tests__ │ ├── fixtures │ │ ├── nuxt.config.js │ │ └── pages │ │ └── …

Nuxt のライフサイクルの中でページの状態をいつリセットするか

詳細は以下のレポジトリの README の中に。 GitHub - ryotah/When-Should-a-Page-State-is-Reset-in-Nuxt-Lifecycle

コンポーネント単体テストについてつらつらと

書きます。 何をテストするのか なぜ書くのか 入力と出力とは何か テストを書く前に調べること 一般的なコンポーネントのテストシナリオ Vue 単体テストのサンプル props と emit のテスト nuxt-link (router-link) を利用しているコンポーネントのテスト Ro…

Vue SSR 環境構築メモ

Vue SSR ガイド, vuejs/vue-hackernews-2.0 を参考に環境構築を試してみた時のメモです。 サーバサイドで Vue をコンパイルする クライアントとサーバのコードをわける (Webpack) ルーティング プリフェッチを実現 サーバとクライアント、それぞれをビルドす…

10月メモ・リンク集

10月に調べたことのメモです。 Vue, Nuxt 関連 Migrate to Nuxt 2.0 Nuxt の options.ignore を利用して pages 内にコンテナやストアを配置 ページ遷移時に権限確認 不要なビルド処理を削減 文字コード・正規表現 Unicode Property Escapes 文字コードの変換…

9月メモ・リンク集

9月に調べたことのメモです。 Vue 関連 ルーティング関連 i18n 言語データの整理方法メモ その他 Vue 関連 What is the best way to access this.$router.push() / router.push() inside the Vuex? · Issue #1384 · nuxt/nuxt.js · GitHub v-on to bind dom …

Vue.js vue-router Nuxt.js の各フック (など) がいつ実行されるかメモ

続編のようなものを書きました。 ryotah.hatenablog.com GitHub - ryotah/vue-vue-router-nuxt-hooks ログに表示される内容: [INFO] vue: [page] / [hook] Vue.js のライフサイクルフック created, beforeUpdate, destroyed, etc. [INFO] vue-router: [page]…

8月メモ・リンク集

8月に調べたことのメモです。 Vue 関連 基礎 ちょっと応用 Angular 関連 JavaScript その他 その他 Vue 関連 基礎 Vue.js 学習メモ - ryotah’s blog Vuex 学習メモ - ryotah’s blog Nuxt.js 学習メモ - ryotah’s blog How to redirect with vue-router? · Is…

Nuxt.js 学習メモ(公式ドキュメントの雑な抜粋)

これは何か Nuxt.js ガイド プロローグ はじめる インストール ディレクトリ構造 設定 ルーティング ビュー 非同期なデータ アセット プラグイン モジュール Vuex ストア コマンド 開発ツール その他 これは何か Nuxt.js の公式ドキュメントを読んだときのメ…