Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

vuejs

Nuxt.js 2.x + TypeScript 4.x その0007 storeの型を設定する

参考にさせていただいたページ 基本的なタイピング 今日の開発環境 Nuxt 2.14.12 TypeScript 4.2.3 定義する 「基本的なタイピング」をよく読むとよい。 ReturnType<typeof state> を使って、stateの型を定義する GetterTree, ActionTree, MutationTree を使う GetterTree</typeof>…

Vue.jsのエラーを解決する [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available.

はじめに 特にwebpackなどを使用して、Vue.jsをこれからはじめようという方に多いとは思いますが、以下のようなエラーがコンソールに出力されることがあります。 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is n…

Nuxt.js 2.x + TypeScript 4.x その0005 ビルド時にJavaScript heap out of memoryなってしまう問題の解決

参考にさせていただいたページ Vue.extendとnameオプションについて API — Vue.js | Vue.extendについて API — Vue.js | nameオプションについて メモリの割り当てを増やす Nuxt (+TS) の開発サーバーがメモリ不足でクラッシュする事象を暫定的に回避する Ja…

Nuxt.js 2.x + TypeScript 4.x その0006 アプリケーションのsrcを一階層深いところに格納する(srcDirの設定を変更する)

参考にさせていただいたページ Nuxtのaliasプロパティについて The alias Property - NuxtJS NuxtのrootDirについて rootDir プロパティ - NuxtJS NuxtのsrcDirについて The srcDir Property - NuxtJS TypeScriptのimportパスの解決について TypeScript: Doc…

Nuxt.js 2.x + TypeScript 4.x その0004 FontAwesomeの必要なアイコンだけ読み込んで使う

参考にさせていただいたページ nuxt-fontawesome - npm Nuxt.jsでFontAwesomeを使う方法。必要なアイコンだけインポートする! - Qiita 今日の開発環境 Nuxt 2.14.12 TypeScript 4.2.3 パッケージをインストールする パッケージを4つインストールします。 ya…

VeeValidateでcheckboxのfalseを許容しない場合のrules

checkboxでfalseを許容しない場合のrules falseでも値があればバリデーションが通ってしまうっぽいので、ValidationProviderに以下のような感じでオブジェクトを渡すと良いかも。 rules="{ required: { allowFalse: false } }" 例えば以下のようになる。 <ValidationProvider v-slot="{ errors }" rules="{ required: { allowFalse: false } }"> 〜</validationprovider>…

Nuxt.js 2.x + TypeScript 4.x その0002 ファイルを保存したときに自動整形する

参考にさせていただいたページ Nuxtのeslintについて GitHub - nuxt-community/eslint-module: ESLint module for Nuxt.js TSのランタイムlintについて Lint - Nuxt TypeScript 今日の開発環境 Nuxt 2.14.12 TypeScript 4.2.3 前提 npx create-nuxt-appした…

Nuxt.js 2.x + TypeScript 4.x その0001 公式の GET STARTED をやってみる

参考にさせていただいたページ GitHub nuxt/create-nuxt-app create-nuxt-app/README.md at master · nuxt/create-nuxt-app · GitHub 公式ドキュメント 日本語: インストール - NuxtJS 英語: Installation - NuxtJS 今日の開発環境 Nuxt 2.14.12 TypeScript …

templateにコメントを書いて「warning 'v-html' directive can lead to XSS attack vue/no-v-html」の警告を個別に無効化する

参考にさせていただいたページ disable eslint in vue template · Issue #260 · vuejs/eslint-plugin-vue · GitHub 範囲を無効化する 以下のように書くと、任意の複数行を無効化できるらしいです。有効化も忘れずにしましょう。 <div class="hoge" v-html="foo" /> 注意点 特に汎用のコンポ</div>…

computedでglobal変数をreturnしているvmをvue-test-utilsでtestする | Vuex + vue-test-utils その0001

参考にさせて頂いたページ Mounting Options | Vue Test Utils 要約すると 要約すると「任意のcomputedを上書きしてからtestを実行する。」ということになります。 例 例えばプロダクトのコードで、 window.gon = { hoge: 'example_value' } を用意して、こ…

Vue.jsでもデザインと振る舞いを分ける(Presentational ComponentとContainer Component について)

参考にさせて頂いたページ Vue Loader公式 SFC Spec | Vue Loader 色々 React/Reduxを約三年間書き続けてきたので知見を共有します - Qiita Presentational ComponentとContainer Component について 日本語訳: Presentational and Container Components – …

webpackでビルドする前にeslintで.vueと.jsの構文チェックをする | webpack4.x+babel7+vue.js 2.x 環境構築 2019年3月版 ステップ0004

参考にさせて頂いたページ webpack.config.jsについて Configuration | webpack eslintについて Command Line Interface - ESLint - Pluggable JavaScript linter eslint-loaderのoptionsについて GitHub - webpack-contrib/eslint-loader: eslint loader (f…

.vueファイルの中にscssを書けるようにする | webpack4.x+babel7+vue.js 2.x 環境構築 2019年3月版 ステップ0003

参考にさせていただいたページ 【webpack】vue&type=style&index=0&lang=scss - Qiita プリプロセッサの使用 · vue-loader TextField.vueを編集する src/javascripts/vue_applications/common/components/TextField.vueのtemplate に以下の通り追記します。 <div class="mod-error-messages"> <ul class="mod-error-messages__list"></ul></div>…

vue-test-utils + jestを追加する | webpack4.x+babel7+vue.js 2.x 環境構築 2019年3月版 ステップ0002

参考にさせて頂いたページ テストを実行する環境の構築 GitHub - vuejs/vue-test-utils-jest-example: Example project using Jest + vue-test-utils together GitHub - babel/babel-bridge: A placeholder package that bridges babel-core to @babel/core.…

Vuexを使用する基本的なビルド環境を構築する | webpack4.x+babel7+vue.js 2.x 環境構築 2019年3月版 ステップ0001

はじめに Windowsでもできます。 MacやUbuntuなどでもできると思います。 これから何回かに分けてnpm initするところから、以下のようなことをできる環境を構築していきます。 webpack4 + babel7 を使ってビルド vue-test-utils + jest を使ってテスト実行 e…

vuexの公式ドキュメントにあるcounterアプリを作ったあとぐらいの頃に知りたかったことのまとめ その0001 | vuex3.xその0001

参考にさせて頂いたページ Vuex とは何か? | Vuex 今日の環境 vue 2.5.17 vuex 3.0.1 はじめに 近頃Vuexを導入するプロジェクトも社内で増えていたり、Vuexを使用する場合の基本的な書き方について聞かれることが増えてきました。 公式ドキュメントからリン…

webpack4.x+vue.js 2.x+vue-loaderでビルド環境を構築する その0001 導入

参考にさせて頂いたページ vue-loaderを使うときのwebpack.config.jsの記述内容について Getting Started | Vue Loader .babelrcについて 1年前に作ったフロントエンド環境を色々新しくした - Qiita 包括的にwebpack 4 入門 webpack 4 入門 - Qiita 包括的に…

vue.js 2.x その0004-02 アコーディオンを作る(jQueryのslideToggleみたいなものを作る)

はじめに 以下の記事で書いたコードを少しマシな感じに書き直しました。 vue.js 2.x その0004 アコーディオンを作る(jQueryのslideToggleみたいなものを作る) - Motomichi Works Blog サーバーサイドから動的な値がwindow.itemsで書き出される想定で書いてい…

webpack3.x+vue.js 2.x+vue-loaderでビルド環境を構築する

参考にさせて頂いたページ Vue.js Vueコンポーネントのユニットテストを書いてみよう - Qiita 最新版で学ぶwebpack 4入門 - BabelでES2017環境の構築(React, Vue, Three.js, jQueryのサンプル付き) - ICS MEDIA ベーシックなWebpackの導入と設定 - Qiita 過…

vuex2.xその0005 namespaced:trueにしたmodule用のオブジェクト構造をひとつ定義して使いまわす

参考にさせて頂いたページ モジュール · GitBook はじめに namespaced:trueにプロパティ設定したオブジェクトをstore.registerModule()で複数回登録します。 ひとつのmodule用オブジェクト、ひとつのcomponent用オブジェクトを使いまわしできるようにしてみ…

vuex2.xその0004 modulesによるstoreの分割と、mapGetters()でmoduleを跨いだgettersやstateの参照をしやすくする

参考にさせて頂いたページ モジュール · GitBook ゲッター · GitBook はじめに babelは使用せずに、Chromeで動作確認をしています。 参考ページのmapGetters()のサンプルで、オブジェクトのスプレッド演算子(Spread Operator)が使用されていますが、エラー…

vuex2.xその0003 vuex入門的な感じでToDo管理アプリケーションを作る

参考にさせて頂いたページ Vue.js + vuexによるToDoアプリケーションの実装 : アシアルブログ Vuex 入門 · GitBook はじめに APIにリクエストする非同期な処理を想定して、actionsからcommitしています。 実際にAPIとか作ったらもう少し違う実装が適切かもし…

vuex2.xその0002 mapStateのこと

参考にさせて頂いたページ ステート · GitBook はじめに storeを複数使うような規模のものを書いていないのでmapStateはまだ自分には必要なさそうですが、少し書いてみました。 サンプルソースコード こんな感じかなー。と書いてみました。 <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"> <title></title> <meta name="description" content=""> </meta></meta></meta></head></html>

vuex2.xその0001 公式ドキュメントにあるカウンターアプリを作ってみる

参考にさせて頂いたページ 公式ドキュメント Vuex 入門 · GitBook ソースコード Edit fiddle - JSFiddle はじめに 色々な事情でwebpackなどを使用できない環境下でスタンドアローンビルドのvuexを使用するような想定で書いています。 サンプルソースコード …

vue.js 2.x その0003-02 トランジション開始前、進行中、完了後、途中キャンセルのタイミングで任意のjs処理を実行する

参考にさせて頂いたページ 公式ページ トランジション効果 - Vue.js 以前書いた記事 vue.js 2.x その0003-01 トランジション効果 簡単なフェードインとフェードアウトをやってみる - Motomichi Works Blog はじめに 以前簡単なトランジションのサンプルを作…

vue.js 2.x その0009 watchで配列(array)や連想配列(object)を監視する

参考にさせて頂いたページ vue.js $watch array of objects - Stack Overflow Vue.js tips - $watch を使ってデータの変更を監視しよう | phiary サンプルコード 連想配列のObjectを丸ごと監視したい場合は、処理はhandler: function(){},の方に記述して、de…

vue.js 2.x その0008 テキストフィールドに数字だけ入力を許可する (郵便番号フィールド)

参考にさせて頂いたページ HTML5におけるinput要素のpattern、type属性のおさらい - Qiita サンプルソース 以下のように書いてみました。 <div id="vue-app"> <h1>Vue.jsのサンプル 静的なページ</h1> <input type="text" v-model="postcode1"> - <input type="text" v-model="postcode2"> </div> <script src="js/vue.js"></script> <script> var vm = new Vue({ el: '…

vue.js 2.x その0007 v-forのindexを使って連番のclassを付与する

参考にさせて頂いたページ vue.js, simple v-for / v-bind to add index to class name - Stack Overflow クラスとスタイルのバインディング - Vue.js サンプルコード 以下のように書いてみました。 <div id="vue-app"> <ul> <li v-for="(item, index) in items" v-bind:class="['hoge-' + index]"> {{item}} </li> </ul> </div> <script src="js/vue.js"></script> <script> …

vue.js 2.x その0006 refで要素を参照する

参考にさせて頂いたページ Vue.js サンプルコード 以下のように書いてみました。 <div id="vue-app"> <button v-on:click="clicked">click here</button> <div> <my-component ref="hogeElm" /> </div> <div ref="fooElm"> foo<br>foo </div> </div> <script src="js/vue.js"></script> <script> new Vue({ el: '#vue-app', data: { }, components: { 'my-com…

vue.js 2.x その0005 lodashのdebounce()とthrottle()で処理の実行を遅らせる

参考にさせて頂いたページ 公式チュートリアルから始めるVue.js vol.1「Markdown エディタ」 - to-R Media Vue 1.x からの移行 - Vue.js Markdown エディタ - Vue.js lodashの_.throttleと_.debounceの使用例 - Qiita はじめに vue.jsの0.xと1.xではdebounce…