これの続き。 www.memory-lovers.blog 前回導入したVeeValidateにカスタムバリデーションを追加したいと思い、 いろいろ調べたらv8nが便利そうだったので、使ってみた。 サンプルはTwitterIDのバリデーションの例 インストール $ npm install --save v8n カ…

フォームのバリデーションのため、VeeValidateを使ってみたときの備忘録 Nuxt.jsのコンポーネントで使う場合は、ちょっとめんどくさかった。。 フォームのバリデーションライブラリはいろいろある Vue公式ガイドでは、以下の2つが紹介されてた。 Vuelidate V…

Loaders.cssを使ってみたけど、display:inline-blockで使いにくかった。。 SpinKitというのもあるそうなので、そっちを使ったときの備忘録 SpinKitは、vue用のライブラリもあるよう(vue-spinkit) SpkinKit(vue-spinkitなし) インストール $ npm install --sa…

以下の記事で、数字がクルクルするアニメーションをやってみたけど、 SSRだとうまくいかないっぽい。。 そのときの備忘録。 www.memory-lovers.blog 初期表示がおかしい！！ TweenLiteを入れたページでリロードするとこんな感じに。。 Unexpected token expo…

ローディングアニメーションを用意しようと見てたら、Loaders.cssが良さそうだなと！ vue用のvue-loadersがあったので、Nuxt.jsに取り込んでみたときの備忘録 インストール $ npm install --save vue-loaders プラグインファイルを作る plugins/vue-loaders.…

Vue/Nuxtのv-forを使ったリストで削除するときに、 リスト要素が横にずれながら消えるアニメーションをしたいときの備忘録 ほぼ、Vueの公式ガイドに書いてあった。。 おぉリストのアニメーションもできた(*´ω｀*)削除時にふわっと横に消えていくヽ(=´▽`=)ﾉ公…

Vueの公式ガイドにある数字を変更すると、 数字がクルクルするアニメーションを使ってみたので、その時の備忘録。 Vueすごい。。TweenLiteすごい。。 おぉ数字がクルクルするアニメーションできた(*´ω｀*)Vueすげー TweenLiteすげーってなってる(*´ω｀*) pic…

またまた Nuxt公式サンプルから。 Vuex Store (using vuex-class) - Nuxt.js vuex-classを使うとStoreのState/Getter/Actionなどを アノテーションで紐付けれるらしい。。なにこれ、超便利。。 page/componentsの部分 こんな感じでできるよう。。すごい。。 …

SSRなNuxt、リロードするとstoreから認証情報が消えてしまい、 認証状態で初期レンダリングできないのつらいなとおもっていたら、 Nuxtのサンプルがよさげだったので、自分用に再整理してみた。 認証ルート - Nuxt.js ざっくりの方針 認証情報をStoreに保存…

Vue/Nuxtで開発しているときに、何度も調べなおすので、まとめてみた。 修飾子の一覧 <a v-on:click.stop="doThis"></a> <form v-on:submit.prevent="onSubmit"></form> <a v-on:click.stop.prevent="doThat"></a>