Vuex から Pinia への移行を行いました - every Tech Blog
はじめに この記事は、every Tech Blog Advent Calendar 2024(夏) の1日目の記事です。 DELISH KITCHEN開発部の羽馬(@NaokiHaba)です。 この記事では、DELISH KITCHEN チラシ で使用している Vuex の Pinia への移行について紹介します。 chirashi.delishkitchen.tv 本記事では、これらの知識があることを前提に説明を進めます。 Vue.jsの基本的な知識 Nuxt.jsの基本的な知識 Vuexの基本的な知識 Piniaとは Pinia（ピーニャ）は、Vue.js用の新しい状態管理ライブラリです。Vuexの次のイテレーションとして開発が始まり、Vuex 5に組み込むことを想定していたアイデアを多く取り入れています。 pinia.vuejs.org Piniaは、Vuexと比較して以下のような
ViteでVueコンポーネントテスト用のカスタム属性を削除する
はじめに お久しぶりです、からころです。 突然ですが、みなさん Vite は利用してますか？ Vitest や Jest をはじめ、Vueでコンポーネントのテストをする際に、 しばしばテスト用にカスタム属性を用意することがあります。 テスト属性がバンドルされてプロダクション環境に出てくると、 意図しない挙動を引き起こしたりするかもしれないから避けたい！ そもそもテストタグを追加するだけなのにビルド後のコードに変更が加わるのは気持ち悪い! といった方に向けた記事になります。 設定について nuxt.config.tsの場合 { ... // 下記を追加する vue: { compilerOptions: { nodeTransforms: [ (node) => { if (node.type === 1 /* NodeTypes.ELEMENT */) { for (let i = 0;
Vue3にアップグレードしてフロントエンドを改善した話 - SMARTCAMP Engineer Blog
vue3-migration-improve-frontend はじめまして！ BALES CLOUDエンジニアのえーす（井上）です。この度、BALES CLOUDで長年使ってきたVue2から卒業し、Vue3を導入した状態でリリースできました。今日はこれについてお話できればと思います。 やったこと なぜVue3移行をしたか TypeScriptサポート 各ライブラリが古い Vue2のEOLが近い 具体的なVue3移行ステップ Vuetify卒業 Vue3導入 Vue3完全移行 移行にあたって問題だったこと ライブラリのアップグレード Vuetify卒業 ElementUI -> ElementPlus 巨大PRによるレビュー負荷 チーム体制 マイグレーションビルドと他ライブラリの相性 よかったこと 課題感 これから 2024/04/03 編集部追記 やったこと Vue2を卒業し、Vue3を
TypeScriptでオーバーロード実装された関数を使う関数を書いていたら 「この呼び出しに一致するオーバーロードはありません。」TS(2769) と言われた - ひと夏の技術
英語だと 'No overload matches this call' って言われると思う。タイトルが長い。 TS書いてて、関数の引数に Options なオブジェクトを受け取って、そのオプションのプロパティによって返り値が違うという関数を書いていた（hoge関数とする）。 で、hoge関数を使いつつ、hoge関数が受け取れる引数の型を外部から渡せる関数（foo関数とする）を書いていた。←ここでタイトルのエラーで怒られてしまった。 コード type A = { passNumber: number toReturnString?: undefined } type B = { passNumber: number toReturnString: true } type Options = A | B function hoge(options: A): number function h
Vuex のアクションの処理を Web Worker にやらせる - Qiita
はじめに Worker を未だに使う機会が無い（むしろ私が実用性を分かってない）ので、今後のために勉強がてら Vuex のアクションで行ってる処理を Worker へ移行する実装をしてみます なんとなく理解できたら、次はworker-domを使ってみたいなと思っております ちなみに Vuex のアクションはデフォルトで非同期処理をサポートしており、非同期処理で捌けるケースがほとんどだと思うので、Worker を使って何かを行うケースはあまり無いかもしれません ただし、重い計算処理があり、非同期による並行処理では解決できない場合（処理を分割して処理速度を改善したいケース）やそもそも非同期処理を使いたくないケースなどがあれば Worker スレッドによる並列処理は良いと思います 私が携わったプロジェクトでは Vuex のアクションは主に API サーバにリクエストを投げて、DB から取得したデ
Vue Error and Performance Monitoring
import { createApp } from "vue"; import * as Sentry from "@sentry/vue"; const app = createApp({ // ... }); Sentry.init({ app, dsn: "https://<key>@sentry.io/<project>"", }); app.mount("#app"); Vue Performance MonitoringQuickly identify performance issues and view full end-to-end distributed trace to see the exact poor-performing API call and surface any related Vue errors. Improve Vue performance w
Rails と密なフロントエンドの開発環境を分離するための3つの工夫
スタディスト開発ブログ Advent Calendar 2021の20日目の記事です。本日は技術支援ユニットの笹木(@s_sasaki_0529) が、開発環境で Rails を立ち上げずに、リモートAPIサーバに接続してフロントエンド開発を行えるようにした話をします。 TL;DRSPA なのに Rails と Vue が密になってるアプリケーションを開発してるせめて開発環境ぐらいはフロントエンド単体で開発できる状態にしたい様々な問題を対処し、理想のフロントエンド開発環境を実現したTeachme Biz の現状のアーキテクチャスタディストが開発・運用する、マニュアル作成・共有システム Teachme Biz は、Vue.js (≠ Nuxt.js) によるフロントエンドと、Ruby on Rails によるバックエンドで構成されています。 Teachme Biz (Web) の大雑把な構成
【2021年版】Vue.js + TypeScriptの開発スタイル - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに 主に2通りのやり方がある 想定している読者 Class Styleの書き方 Class Styleの特徴 Object Styleの書き方 Object Styleの特徴 どっちで書く？ 見やすさ・馴染みやすさ 利用者の多さ 公式のサポート まとめ 参考 はじめに こんにちは。フロントエンドチームのayoshです。 この記事では、TypeScriptとVue.jsで開発を行う方法について紹介していきたいと思います。 自分の参加しているプロダクトでもTypeScriptとVue.jsを用いた開発をしていますが、最近のWebアプリケーションのフロントエンド開発ではTypeScriptとReact、もしくはTypeScriptとVue.jsで開発をしている現場は多いのではないでしょうか？ 主に2通りのやり方がある 様々な記事でも紹介されていますが、Vue.jsとTypeScriptで開
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Differences Between Vue 2 And Vue 3
Vue Fes Japan 2023 Aftermovie
Vue.js
VitePress | Vite & Vue Powered Static Site Generator
https://certificates.dev/vuejs/
https://slides.nahoko.dev/v-tokyo-16-nuxt-3-migration/1
Migrate from v4 | Vue CLI
Practical usage of Mutation Types in Vuex
GitHub - saifaustcse/vue-developer-roadmap: Vue Developer Roadmap
Setup Storybook • Storybook docs
プレイドにおけるプロダクトの国際化の取り組み | 野田 陽平 PLAID, Inc
coincidence