Nuxt.js
github.com ちょっと詰まった箇所をメモしておく。 現在の Locale を取得したい <template> <div> <h1>{{ $i18n.locale }}</h1> </div> </template> <script> export default { mounted() { this.$i18n.locale } } </script> Script 内部で利用したい <template> <div> <h1>{{ name }}</h1> </div> </template> <i18n> ## language=yaml en: name: "omiend" ja:…</i18n>
デモ へいしゃの フリエン にてお試しいただけます。 導入手順 nightcatsama.github.io 基本的にオフィシャルサイトを見ればかんたんに導入できます。 install $ yarn add vue-slider-component nuxt.config.js plugins: [ { src: '@/plugins/vue-slider-com…
omiend.hatenablog.jp ↑の続き。 タイトルの通り、 ● Test suite failed to run ReferenceError: regeneratorRuntime is not defined というエラーでテスト自体が正常に処理されないケースがある。 どうやら babel 周りの設定が原因らしいのだけど、いまいち…
Nuxt.js で Jest を利用したテストを実装する際にエンカウントしたワーニングやエラーの対処法メモ なんかタイトル日本語でOK状態だけど、つまりそういうこと。 Jest でテストを書いていたのだけど、いろいろぶち当たったので都度メモしていく。 [Vue warn]:…
結論 十中八九 SSR 時のエラーだと思って良い。 事例 画面の実装（あるいは見た目）上には全く問題無いのに、エラーでコンポーネントが表示されないなど、ちょいちょいハマったことがある。 今日あったのは、 vue-awesome-swiper を導入してデプロイしたら、…
VeeValidate とは baianat.github.io フォームにバリデーションを掛けてくれる便利なやつ。 例えば、メールアドレス入力欄のバリデーションを メールアドレス形式 入力必須 MAX255文字 としてバリデーションしたい場合、このように定義してあげるだけで
Nuxt.js を書いていてこんな経験は無いだろうか？ 急にエラーが出た ソースコード上では全く問題なさそう エラー箇所を消してもエラーの内容に変化なし 無い？ああ、あなたはすぐこのページを閉じるべきです。 なぜならたいしたことのない話だからです。 あ…
こんなエラーが出た。 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…
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…
地味にハマったのでメモ。 例えば、下記のように画像ファイルの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 を指…
前段 vuex の actions 内で this.$axios を使ってAPIを叩きたい。 エンドポイントは 環境ごとに分けたい。 - local : http://localhost:3000/api - production : http://hogehoge.jp/api しかし、現在ローカルでは axios: { host: 'localhost', port: 3000, …
参考にさせていただいたページ Vue.jsで自動カナ入力する。 autokanaの導入で奮闘してみた。 - Qiita 【Nuxt.js】ReferenceError: window is not defined ってエラーが出た｜たか橋｜note window or document undefined - Nuxt.js 上記をすべて読んだ前提で…
2019/01/23 16:18:18 更新 fetch()メソッドからのStore経由でPropsを使わないSSRが実現できたので追記 Componentが正しくSSRされない 先日、こんな感じ↓でComponentの設計をした。 omiend.hatenablog.jp 利用するデータは極力Component内部だけで完結させた…
この記事は、空いていたので Nuxt.js #2 Advent Calendar 2018 の21日目の記事としました。 20日目は同僚である@ryamakuchiのNuxt.js と Firebase（Firestore）を使って認証と DB 保存を実装するでした。 TL;DR Nuxt.jsのComponentをどの単位で分けるか悩ん…
この記事は、Nuxt.js #2 Advent Calendar 2018 の15日目の記事です。 14日目は POPOPON - Qiita さんの Nuxt でストアから GraphQL を扱う方法 - Qiita でした。 16日目は taroodr - Qiitaさんお願いします。 SSR（サーバーサイドレンダリング）してますか？…
この記事は、Nuxt.js #2 Advent Calendar 2018 の１日目の記事です。 ２日目は @amishiro さんの 「nuxt.js(v2)でSEOに必要なmeta(OGP含む)を最低限コントロール」です。 せっかくのアドベントカレンダーが空いていたので、サクッと事始め的なものを書いてお…
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)…
