BOLGの投稿画面はNuxt 2でできていて、3にするための準備で何度かNuxt Bridgeにするチャレンジをやっている。ただ毎回なにかしらがコケて成功しないので、もういっそのこと直接2から3へ上げてやろうということで、その準備としてのPinia移行。Vuex 4を使うと…

https://bolg.in の話。今までできなかったんかいって感じだけど。適当にやってるとtabでフォーカスできない要素をつくってしまうという例です。Chromeでしか確認してないのでマネするときは注意。 フォーカスできない要素をフォーカスできるようにする ブラ…

仕事でも趣味でもVueアプリケーションのテスト書いてるんだけど、趣味の方でなんか起きた。 <template> <input :value="store.state.foo" /> </template> <script lang="ts"> import { defineComponent, useContext } from '@nuxtjs/composition-api' export default defineComponent({ setup(_props, context) { const { store } = use…

仕事でVueのコンポーネントのテストを書いていたんだけど、localVueつくっていくつかuseっていう↓みたいなコードをどのテストにも書かないといけなくて、どうにかなりませんかという気持ちになったという話。 import { mount, createLocalVue } from '@vue/t…

使っているのはvue-apolloだけど。 Mutationした結果をつかってquery cacheを更新する、ということができる。これによってもう一回queryしなくてよくなるなどの効果がある。Optimistic responseと組み合わせると、迅速なフィードバックを利用者に返すことが…

前に書いた社内向けの日報Webサービスで、RESTful(RESTish?)なAPIからGraphQLなAPIに書き直しをしてる。 サーバ側 そもそもそんなに大きなアプリケーションではないので、雑にhas manyやらassociationsを辿っていく程度のものはすぐにできた。認証はAuthoriz…

最近はカラーミーリピートのフロントエンド開発で生計を立てています。お仕事なのでいろいろ施策があり優先順位があるわけですが、今のチームは自由研究と称して優先順位外のことをしてもほどほどなら許される空気があるので、興味あるツールなどをお試しし…

Vue.js 2系を対象とします。 何がしたいかというと、 <my-great-text-input v-model="text" /> ということがしたい。 とりあえずドキュメントを見ると、以下のような方法が書いてある。 https://jp.vuejs.org/v2/guide/components.html#カスタムイベントを使用したフォーム入力コンポーネント <template> <input type="text" :value="value" @input="updateText"> </template> <script> e</my-great-text-input>…