tekitoumemo’s diary

思ったことを書くだけ。長文版Twitter

Vue

【Nuxt】metaタグが重複する問題を回避する

nuxtjs.orgnuxt.config.jsにこんな感じでmetaタグ書いて head: { meta: [ { name: 'description', content: 'Meta description' } ] } pagesで同じdescriptionタグをこんな感じで書く head() { return { meta: [ { name: 'description', content: 'My custom…

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…

NuxtJSでVeeValidate 3.x系を使う

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

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

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