結論 未認証時にログインページに飛ばしたい時など、 redirectする際はreturnしないと後続処理に進んでしまうので注意しましょうという話。 Railsでも以下のようにreturnとredirect処理はセットだったので、よくよく考えればそう...(うっかりしがち) def sho…

概要 Nuxt.jsでmiddlewareディレクトリ配下に authenticated.ts のようなファイルを配置してそれをテンプレートから呼び出す方法はサンプルが沢山あるものの、 インラインでmiddlewareを書くサンプルがないなと思い、書き方に若干迷ってしまったので未来の自…

背景 Options APIでAPIを叩いている箇所はそのままで、setup関数内のプロパティにそのAPIの戻り値をセットしたい状況がありました。 setupとOptions APIでデータをやり取り出来たはずだけど、どうすればよかったっけ？... と悩んでしまったので、本稿はその…

結論 script setupを使ってコンポーネント名を定義することが出来ないので、もう一つscriptタグを書いてそこで export default する Sample.vue <script> export default { name: 'Sample', } </script> <script setup lang="ts"> ・・・ </script> <template> <div> ・・・ </div> </template>

概要 定期的に一からファイルアップロード機能を実装するたびにref周りで凡ミスしている気がするので、Nuxt.js(Vue.js)でファイルアップロードを実装する時にアレコレを備忘録としてまとめます。 やること input タグに ref="fileInput" のような形でinputタ…

結論 📝 shallowMount(mount) のプロパティの mocks の中に $nuxt -> context -> mockしたいコンテキスト の順番で定義すれば良い describe("Component", () => { let localVue: typeof Vue; let wrapper: ReturnType<typeof shallowMount<Vue>>; beforeEach(() => { localVue = createL</typeof>…

結論 プロジェクト直下に SVGファイルをテスト実行時にパースするファイル (svgTransform.js) を定義して、Jestでそれを読み込むようにする github.com 各パッケージのバージョン nuxt@2.15.8 vue@2.6.14 @vue/test-utils@1.3.3 @vue/vue2-jest@29.2.0 jest@…

概要 Nuxt.jsの2系でモーダルを実装する際にモーダルの開閉フラグをv-modelで管理する際のイベント発火させる動作がややこしかったので今回はそれをまとめます。 結論 inputイベントでなくても v-model を使う場合は、 親コンポーネントで指定した v-model="…

起こったこと qrcode というnpmパッケージを型定義パッケージと一緒にインストール。 $ npm install --save @types/qrcode $ npm install --save qrcode しかし、VSCode上では import { toDataURL } from "qrcode"; の 部分のモジュールが見つからないという…

概要 Propsにプリミティブな型以外を指定したい時の方法を定期的に忘れるので今回はその備忘録です... 結論 📝 PropType型 を '@nuxtjs/composition-api' からimportして PropType<指定したい型> で定義する <script lang="ts"> import { defineComponent, PropType } from '@nux…

概要 Nuxt.jsで新規作成したアプリ( nuxt@2.15.4 )で Composition API を利用しようとして、 nuxt.config.js に以下のようにプラグインとして追加したところ以下のエラーが... buildModules: [ '@nuxtjs/composition-api' ], ✖ Nuxt Fatal Error │ │ │ │ Err…

はじめに 何か作る時のマークアップで迷いがないように画面全体でローディング表示するときのサンプルを自分用にメモしておきます。 サンプルコード <template> <div class="fixed top-0 left-0 z-50 w-screen h-screen flex items-center justify-center" style="background: rgba(0, 0, 0, 0.3);"> <div class="bg-white border py-6 px-12 rounded-lg flex items-center flex-col"> </div></div></template>

前提 Nuxt.js / 2.15.2 TypeScript / 4.2.3 > npm list vue nuxt-sample-app@1.0.0 /Users/fuqda/nuxt-sample-app ├─┬ @nuxtjs/composition-api@0.22.3 │ ├─┬ @nuxt/vue-app@2.15.2 │ │ ├── vue@2.6.12 deduped │ │ └─┬ vuex@3.6.2 │ │ └── vue@2.6.12 dedup…

近況 最近、突然無性にやりたくなりNuxt.jsの勉強を始めました！ という訳でノロノロと勉強したメモを放流します。 asyncDataについて Vue.jsにはdata関数というDOMで扱うプロパティを予め定義しておいてコンポーネント内で使用出来る仕組みがあります。 さ…