Composition API

はじめに Day.jsの導入経緯 JavaScriptは日付処理がややこしい。 momentは既に死んでいる Day.js、君に決めた Vue.js(Vue3)でのDay.js使用方法 Day.jsのインストール Day.jsをvue.jsへ読ませる方法(inject/provide使用) Day.jsをvue.jsへ読ませる方法(globalProperties使用) Day.jsプラグインの読ませ方 まとめ はじめに こんにちは。エンジニアの仕事をしている、たかふみです。 javascriptの日付処理ライブラリである、Day.jsをVue3で使用する方法についてまとめたいと思います。 D…

はじめに mixisは共通関数としてどうなのか vue.jsで共通関数をどう作るか 共通関数のメリット Composition APIで使用可能 オブジェクト指向的に考えられる どこから呼び出したのか分かりやすくなる まとめ はじめに こんにちは。エンジニアの仕事をしている、たかふみです。 本日は、vue3より正式導入された、Composition APIを使用した共通関数の作り方についてまとめたいと思います。 Composition APIを共通化する際に、参考としてください。 mixisは共通関数としてどうなのか vue.jsには、mixinsという機能がありますが、mixinsには以下の…

どうもこんにちは！ 2021年4月にANDPADにジョインし、現在チームでフロントエンドの開発をしている鳩です。 こちらのVue Composition APIをチームで導入して得られたメリット - ANDPAD Tech Blogでも取り上げられていますが、私のチームでもOptions API + Vuex で実装されていたコンポーネントをComposition API + without Vuex のパターンへ書き換えを行っています。 Composition APIへ書き換える最大のメリットは、コンポーネントのロジック部分の多くを単なるJavaScript関数として切り出せるので、コンポー…

blog.vuejs.org Vue3.2がリリースされたらしい。内容がいい感じだった。 script setup Compositon APIで書くとどうしても気になる構文の縦長さ。 <template> <button @click="addNum">Num:{{ num }} </div> <template> <script> import { ref } from 'vue' export default { setup () { const num = ref(10) const addNum = () => num.value++ return { num, addNum } }…

@nuxtjs/composition-apiを使ったプロジェクトで、$axios.postを発火するメソッドをテストをする際にかなり詰まったので記事にします。 検証環境 nuxt: 2.15.3 @nuxtjs/composition-api: 0.22.3 @nuxt/typescript-build: 2.1.0 jest: 26.6.3 @vue/test-utils: 1.1.3 ざっくり結論 Vue Test Utilsのマウンティングオプションで$nuxtとcontextをモックする $axiosが読み込まれない問題 useContext()から$axiosを読み込み、postや…

@nuxtjs/composition-apiを使用したプロジェクトでテストを実行する際、表題のエラーでテストが実行されないことがあります。 実装ではnuxt.config.tsのbuildModulesに@nuxtjs/composition-apiを記載していると思いますが、Jestにも@nuxtjs/composition-apiのエントリーポイントを教えてあげる必要があります。 module.exports = { moduleNameMapper: { '^@/(.*)$': '<rootDir>/$1', '^~/(.*)$': '<rootDir>/$1', '^vue$': '…

前書き はじめまして、ANDPADでフロントエンド開発を担当している小泉です。入社から2年弱ですが、ここ1年の社員数の増えるペースが速すぎてすっかり古株になりつつあります。 自分は入社当初からVue.js・Nuxt.jsを使って開発を行っているのですが、2020年7月頃よりスタートしたプロジェクトで、Vueの新しい記法であるVue Composition APIを全面的に採用しています。 この記事では、Composition APIを実際に製品開発に導入するまでの流れから、9ヶ月ほど使っていく中で気づいたComposition APIのメリットとデメリットなどをまとめています。 昨年秋にVue…