tekitoumemo’s diary

.NET CoreとVue、Angularなどの技術ブログを書いています。みんなの洋楽ランキングを運営しています。

NuxtJS

VeeValidateで一括検証+スクロールするmixins

v3ではValidationObserverが追加され、一括検証が楽になった(v2知らない😇) 一括検証+エラーの要素にスクロールできれば嬉しいはずなので、そのmixinsを書く。 スクロールはお任せで、vue-scrolltoとかいいんじゃないかしら。page/hoge.vue <ValidationObserver ref='observer'> <ValidationProvider/> <ValidationProvider/> </ValidationObserver> <script> import Val…

universalモードでのaxiosのエラーハンドリングを共通化する

universalモードの場合、SPAのハンドリング、SSRのハンドリングをしなければならない。SPAの場合はビューで制御して ビュー - NuxtJSSSRの場合はnginxのerror_pageディレクティブとか使って制御する必要がある 。フロントもSSR、SPAを判定してエラーハンドリ…

[NustJS]外部ファイルからstoreにアクセスする

NuxtJSではコンポーネントやplugins、middlewareなどなど、contextにアクセス出来ないことがある。つまりstoreにアクセス出来ない。やり方はいろいろあるが、自分なりの落とし所を書く。 globalで使う(やばい) .eslintrc.js globals: { $store: true, ... …

正規表現を使ってディレクトリ内のファイルをrequire出来るようにする

requireでは、ファイル名を直接指定する必要がある。 require const hogehoge = require('./hoge/hogehoge.js') たまーに動的に使いたいときがある(NuxtJSでVeeValidateでカスタムルール作るときとか)。 こう使ってたりすることが多い。 names.forEach(nam…

NuxtJSでloglevelを扱う

nodeのロガーはfsに依存しているものが多く、 クライアントで気軽に使えるのが少ない(Winston 、Bunyan、log4js-node全部だめ) loglevelはなんでも行けるマンなのでこちらをNuxtJSで使う。github.complugins/logger.js /** * ref. https://github.com/pimt…

e2eにcypressとjest-puppeteer使った

結論 cypress一択 技術検証+基盤導入の仕事があってどっちも軽く使ってみた。 cypress 導入まで npm install cypress --save-dev package.json "scripts": { ... "test": "jest test", // cypressもテストするのでディレクトリ指定 "cypress:open": "cypres…

NuxtJSでVeeValidate 3.x系を使う

前回の記事で書いたプロフィールサイトでお問い合わせ画面を作ってます。 どうせ作るんならフォームバリデーションを追加してみることにします。なのでVeeValidateを使ってみます。 tekitoumemo.hatenablog.com Nuxtの設定は以下をほぼパクリました設定から…

NuxtJS勉強用にプロフィールサイトを作ってみてる

次の案件でNuxtJSを使うためプロフィールサイトを作りました(まだ途中) チュートリアルを一通り終えて、なんとなく理解したものの消化不良感が否めなかったので、フロント、サーバー間を通じて一つのサイトを作れば、それなりの力がつくはずなのでこの冬休…