@vue/compatによりVue2モードで動いていたアプリケーションをVue3モードに変更した際に詰まった問題(`.native`)
はじめに 2年ほど前に移行ビルドを使ってVue2からVue3にマイグレーションしました。しかしそれ以来そのままになっており、また他のライブラリを使ってる上で不具合が見受けられる（例：ElementPlusのel-tagのxアイコンが動作しない、etc..）ことから、流石にそろそろ標準ビルドへの切り替え（＝完全移行）を決意しました。 手順としては以下で進めました。 移行ビルドのモードを３に切り替えてエラー箇所の対応 移行ビルドの削除 今回は手順１において遭遇したとあるbreaking changes問題について取り上げます Vue.configureCompat({ + MODE: 3, - WATCH_ARRAY: false, - COMPONENT_V_MODEL: false, - ... }) emit名にDOMネイティブに存在するイベントキーを使っている 「らくしふ」には、以下の
Vue RouterとTransitionで画面遷移の実装したときにハマった
はじめに Vue RouterとVueのビルトインコンポーネントであるTransitionで画面遷移時のアニメーションを適用することにした。 しかし、一部のコンポーネントの読み込みが以上に遅くなってしまったので、調査〜解決まで行ってみた。 TL;DR <Transition>は子要素として単一ノードでなければならない。 <component>を<div>で囲って一つの要素にする必要があった。 ただ、<Transition>のアニメーションを発火させるため、<div>にkey属性を追加する必要がある。 Transitions require single children nodes. Therefore you can wrap the <component> tag inside a <div>, however, a plain <div> inside a <transition>
ReactからVueコンポーネントをブリッジして使う方法
始めに Vue.jsからReactに乗り換えよう！そんなふうに思ったときに、規模が小さいなら一気に全部差し替えることができるかもしれませんが、大きくなるとそれは難しくなると思います。段階的にやる方法の1つとして1ページずつReactに差し替えていくことが考えられますが、そこで使われているVueコンポーネントが他のページと共通で使われていて迂闊に差し替えることができない・・・なんてケースもあると思います。 最初の移行コストを下げるために、そもそもVueコンポーネントをブリッジさせて表面上だけReactで動かすみたいなことができないかなと色々検証していて、ある程度動くようになったので記事にまとめたいと思います。今回は移行の話なのでVue2を対象にしています。 検証イメージ 下のGifアニメのような、Reactアプリの中でVue.jsで作ったカウンターコンポーネントを呼び出してデータやイベントを
Vue2 (nuxt2) で TypeScript の型を守る Tips - Mobile Factory Tech Blog
こんにちは、ブロックチェーンチームの id:d-kimsuon です Vue2 では TypeScript がサポートされており、公式の TypeScript のサポートのドキュメント に従うことで TypeScript で書いていくことができます しかし、素直に書いていくと any 型になってしまったり、実際とは異なる型付けになってしまうポイントがあります この記事では TypeScript で Vue2 (Option API) を書くときに型を厳格にしやすい書き方等を紹介します 省略可能な props には明示的に PropType<型 | undefined> する 型安全な例 型安全でない例 props の型でリテラルに絞っている時、 default には as const をつける 型安全な例 型安全でない例 data の型を as で上書きせず、型注釈を書く 型安全な例 型安
Vuexのstateはundefinedで初期化しちゃダメ？ - kk-web
条件付きではありますが、あまりよくないらしいです、全然知らなかった… ちなみに、undefined で初期化という表現自体おかしいですが、今回はわかりやすさ重視でこう書いちゃいます。 なぜ気づいたか Vuex に対し jest でテストを書いていたところ、undefined で初期化した state が更新されないことがあったため。 根拠 vue-class-component#undefined-will-not-be-reactive To take consistency between the decorator behavior of Babel and TypeScript, vue-class-component does not make a property reactive if it has undefined as initial value. You should
Nuxt.jsのビルドを高速化してみる - ContractS開発者ブログ
こんにちは。Holmesでエンジニアをしている三澤です。 背景 弊社ではフロントエンドフレームワークとしてNuxt.jsを利用しています。プロジェクトが進みコードが増えてくるとビルドに時間がかかってくるのが悩みの種です。 ビルド時に最も時間がかかっているのは下記の画像の部分ですが、恐らくwebpackのビルドに最も時間がかかっているのではないかと仮定しました。 この仮定に基づいて何かいい方法はないかと探しているとNuxt.js本家のGithub上で興味深いissueを見つけました。 github.com ここでNuxtの中の人がこのようなことを言っていました。 今回は上記のコメントで取り上げられている方法を試してNuxt.jsのビルド高速化(=webpackのビルド高速化)に取り組んでみたいと思います。 背景 概要 実行結果 何もしていない場合 parallelプロパティ cacheプロパ
vue-observe-visibilityを使って画面内のときだけ表示する - くらげになりたい。
画面外のときは描画しないようにし、無限ローディング時の性能改善したときの備忘録。 vue-observe-visibilityを使って、画面内かを検知して表示を切り替えてみた。 インストール まずはインストール。 $ npm install --save vue-observe-visibility # IEなどIntersection Observer APIに対応してないブラウザ用のpolyfill $ npm install --save intersection-observer プラグインの作成 plugins/observe-visibility.tsを作成 // polyfillは最初に読み込む require('intersection-observer'); import Vue from "vue"; import VueObserveVisibility from "
Create a Blog with Nuxt Content
Create a Blog with Nuxt Content The Content module is a git files based headless CMS that provides powerful features when it comes to write blogs, documentation sites or just adding content to any regular website. In this post we will go through most of the benefits of this module and discover how we can create a blog with it.
Web Vitals, Google Search & the State Vue & Nuxt performance optimization in July 2020
As google recently announced their new guidelines for Web Vitals as an update of their existing Lighthouse KPIs, a lot of discussion on how to to optimize against these values has come up. I wanted to document some of the best practices that I ended up using. As a disclaimer, if your goal is to reach a performance score ≥ 85 with a tool like web.dev or pagespeed insights, any kind of client side h
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
v-model with custom element that wrap checkbox. · Issue #3838 · vuejs/vue
Vue two way data-binding in custom checkbox
Vuejs typescript this.$refs.<refField>.value does not exist
VueJS 2, router guard
https://blog.yukii.work/posts/2022-05-21-why-nuxt-speedkit-scores-so-well/
Hello World | Warren Lee
Models and Collections for Vue.js - Vue Models & Collections
My web performance journey with Nuxt, Storyblok & Netlify
add example of $ref casting to any in documentation · Issue #94 · vuejs/vue-class-component
CSS Architecture on Vue.js
Vue Router Architecture and Nested Routes