Nuxt.js

Nuxt.js に VueSliderComponent を導入し検索条件を範囲指定可能に

デモ へいしゃの フリエン にてお試しいただけます。 導入手順 nightcatsama.github.io 基本的にオフィシャルサイトを見ればかんたんに導入できます。 install $ yarn add vue-slider-component nuxt.config.js plugins: [ { src: '@/plugins/vue-slider-com…

Nuxt & Jest にて ReferenceError: regeneratorRuntime is not defined が出るケースに対処

omiend.hatenablog.jp ↑の続き。 タイトルの通り、 ● Test suite failed to run ReferenceError: regeneratorRuntime is not defined というエラーでテスト自体が正常に処理されないケースがある。 どうやら babel 周りの設定が原因らしいのだけど、いまいち…

#Nuxt.js で Jest を利用したテストを実装する際にエンカウントしたワーニングやエラーの対処法メモ

Nuxt.js で Jest を利用したテストを実装する際にエンカウントしたワーニングやエラーの対処法メモ なんかタイトル日本語でOK状態だけど、つまりそういうこと。 Jest でテストを書いていたのだけど、いろいろぶち当たったので都度メモしていく。 [Vue warn]:…

Nuxt.js で 「window is not defined」というエラーが出た場合の対処

結論 十中八九 SSR 時のエラーだと思って良い。 事例 画面の実装(あるいは見た目)上には全く問題無いのに、エラーでコンポーネントが表示されないなど、ちょいちょいハマったことがある。 今日あったのは、 vue-awesome-swiper を導入してデプロイしたら、…

VeeValidate でフォームをいい感じにする

VeeValidate とは baianat.github.io フォームにバリデーションを掛けてくれる便利なやつ。 例えば、メールアドレス入力欄のバリデーションを メールアドレス形式 入力必須 MAX255文字 としてバリデーションしたい場合、このように定義してあげるだけで

Nuxt.js どうにも不明なエラーが出た場合チェックする箇所

Nuxt.js を書いていてこんな経験は無いだろうか? 急にエラーが出た ソースコード上では全く問題なさそう エラー箇所を消してもエラーの内容に変化なし 無い?ああ、あなたはすぐこのページを閉じるべきです。 なぜならたいしたことのない話だからです。 あ…

Vuex にて state に( data で定義した)Object を代入すると参照渡しとなり、当該 data の変数を v-model で参照している場合、値を変更するとエラーとなる

こんなエラーが出た。 app.js:580 Error: [vuex] do not mutate vuex store state outside mutation handlers. at assert (commons.app.js:19688) at Vue.store._vm.$watch.deep (commons.app.js:20364) at Watcher.run (commons.app.js:15703) at Watcher.u…

Nuxt.js で app.html を作る際、地味にハマったコト

GTM と YTM を Nuxt.js プロジェクトに設定しているが、YTM を設定する Google Tag Manager GTMは @nuxtjs/google-tag-manager を利用すれば簡単に設定できる。 Yahoo Tag Manager YTMはmodule化されていないため、生HTMLタグで設定する必要がある。 <script id="tagjs" type="text/javascript"> (funct…

Nuxt.js のv-for内部で、動的にファイルのURLを作成する

地味にハマったのでメモ。 例えば、下記のように画像ファイルのURLをべた書きしたならば、ちゃんと /_nuxt/src/assets/images/consultants/1.jpg として認識してくれる。 <div v-for='user in users' :key='user.id'> <img src='~/assets/images/profiles/1.png' /> </div> v-forでユーザー一覧データを回していることから分かってもらえる通り、 :src を指…

Nuxt.js 2.6.2 / axios 5.0.0 で、axios の deafaults.baseUrl を設定するハナシ

前段 vuex の actions 内で this.$axios を使ってAPIを叩きたい。 エンドポイントは 環境ごとに分けたい。 - local : http://localhost:3000/api - production : http://hogehoge.jp/api しかし、現在ローカルでは axios: { host: 'localhost', port: 3000, …

Nuxt.js(2.4.x)でAutoKanaを利用する方法

参考にさせていただいたページ Vue.jsで自動カナ入力する。 autokanaの導入で奮闘してみた。 - Qiita 【Nuxt.js】ReferenceError: window is not defined ってエラーが出た|たか橋|note window or document undefined - Nuxt.js 上記をすべて読んだ前提で…

#Nuxt.jsのComponent単位でSSRしたかったけどダメだった話

2019/01/23 16:18:18 更新 fetch()メソッドからのStore経由でPropsを使わないSSRが実現できたので追記 Componentが正しくSSRされない 先日、こんな感じ↓でComponentの設計をした。 omiend.hatenablog.jp 利用するデータは極力Component内部だけで完結させた…

#Nuxt.jsのComponentをどの単位で分けるか悩んだ話

この記事は、空いていたので Nuxt.js #2 Advent Calendar 2018 の21日目の記事としました。 20日目は同僚である@ryamakuchiのNuxt.js と Firebase(Firestore)を使って認証と DB 保存を実装するでした。 TL;DR Nuxt.jsのComponentをどの単位で分けるか悩ん…

Nuxt.jsのSSRの動きをHeadlessBrowserで確認してみる

この記事は、Nuxt.js #2 Advent Calendar 2018 の15日目の記事です。 14日目は POPOPON - Qiita さんの Nuxt でストアから GraphQL を扱う方法 - Qiita でした。 16日目は taroodr - Qiitaさんお願いします。 SSR(サーバーサイドレンダリング)してますか?…

Nuxt.js x Firebase事始め

この記事は、Nuxt.js #2 Advent Calendar 2018 の1日目の記事です。 2日目は @amishiro さんの 「nuxt.js(v2)でSEOに必要なmeta(OGP含む)を最低限コントロール」です。 せっかくのアドベントカレンダーが空いていたので、サクッと事始め的なものを書いてお…

Nuxt.jsで「error and 0 warnings potentially fixable with the `--fix` option.」と出たら

nuxt.config.js の extend(config, ctx) { // Run ESLint on save if (ctx.isDev && ctx.isClient) { config.module.rules.push({ enforce: 'pre', test: /\.(js|vue)$/, loader: 'eslint-loader', exclude: /(node_modules)/ }) } } を extend(config, ctx)…