【理論】Jest 1 テストにおける基本メソッド｜【Vue3】Jest & Vue Test Utils 詳解 チュートリアル
はじめに AWS Amplify と Vue.3 系を使った Web アプリケーションの構築方法を記事にします。 今回は認証画面を作成するところまでが対象です。 Vue3 になってからの認証機能のカスタマイズ方法の記事数がまだそれほど多くない印象でしたのでその辺りも扱っています。 公式サイトを見るのに慣れてないのだけども、個人の記事は Vue2 系の内容が多くて困ってる！ といった方に参考になればと思い作成しました。 ぜひご活用ください 🙇 この記事でわかること
@spring_rainingさんが事前に募集した質問を@kazu_ponさんに質問していくインタビュー形式のコンテンツでした。どの質問も気になっていたものだったので、回答を聞けて良かったです。 特にマイグレーションで使えるツールのvue-codemodは初耳だったので、調べてみようと思っています。 （以下内容メモ） 1. Composition APIと今までのAPIとの使い分けは？ コンポーネント間でのロジックの共有のために使う。2.xのoptionスタイルでそれを行うためにはMixinを使うしかなかったが、ネームスペースの問題などがあった。Composition APIなら従来のJavaScriptの構文でロジックを共通化できる optionスタイルをどういった時に使う？ JavaScriptのスキルが求められる Composition APIは設計スキルが、optionスタイルの方
Vue 3 の Composition API における watch vs watchEffect - Qiita
はじめに Composition API を使用する上で、watch と watchEffect って何の違いがあって、どういう時にどっちを使えばいいのか、わからない... Vue3 の公式ドキュメントには、watchEffect と比べて watch には以下のメリットがある、と書かれています。あまりにサラッと書かれていて、腹落ちしなかったので、これらを整理した結果をメモとして残します。 https://v3.ja.vuejs.org/guide/reactivity-computed-watchers.html#watch 1. 作用の効率的な実行 1. ウォッチャの再実行条件の明文化 1. ウォッチされている状態に対しての、変更前後の値両方へのアクセス 結論 大きな違いは監視対象の定義の仕方なので（あくまでも個人的な結論）、どちらでも好きな方を使えばいいと思います。watch と w
前提条件 PCはMacを使います。 既にパッケージ管理ツールのYarnが入っていることを前提に進めます。 プロジェクトの作成と起動 今回はプロジェクトの作成にViteを使います。Vite（ヴィート）とはビルドツールのことで、Vue CLIやWebpackよりも開発サーバーの起動が早いことが特徴です。 次のコマンドでVue3とTypeScriptのプロジェクトを作成します。 ❯ yarn create vite ✔ Project name: … vue-sample ✔ Select a framework: › vue ✔ Select a variant: › vue-ts
UIT INSIDE ep.158『プロダクトの負担を最小限に。複数サービスにまたがるUIコンポーネントのVue 3移行戦略』
@potato4d が @ytamemot に、PayPayカードと保険サービスにまたがるUIコンポーネントのVue 3マイグレーション戦略について話を聞きました。 About ゲスト紹介 tamemoto さん（デザインエンジニア） 2022年にヤフー株式会社に新卒入社、現在はPayPayカード株式会社に出向 マイグレーションの背景 Vue 2のEOLとセキュリティの観点からの移行必要性 PayPayカードのWeb版とミニアプリ版の両方でVueを使用 共通UIコンポーネントのnpmパッケージ化とそのマイグレーション マイグレーションの概要 約1か月半の期間で実施 機能開発と並行して行う 課題と解決策 カード側のVue 2からNuxt 3への移行 保険側のVue 2からVue 3への移行 ViteとWebpackの両対応の必要性 プロトタイプ機能を使った共通インターフェースの実装 特に苦労
軽率にVue 3で リアルタイム3Dアプリを作れる ライブラリを作ってみた/vue-with-3d-app
v-tokyoにてLT登壇した資料です
Hello ! Today we will talk about state management. Because my article about the problems I encountered switching from Vue 2 to Vue 3 was quite popular, I decided to continue writing about my journey to switch to Vue 3 and tell you about my experience in choosing a State Management library in Vue 3. With the new Vue 3 composition API, the options you have for state management are expanding a lot an
Vue3で保守性の高いテストコード作成方法を解説！Vue3エンジニアが実装とテストの疎結合実装方法を解説！ | Ragate ブログ
Vue3で保守性の高いテストコード作成方法を解説！Vue3エンジニアが実装とテストの疎結合実装方法を解説！ こんにちは！ 今回は Vue3 でのコンポーネントのテストコードの作成方法を紹介します！ テストコードを書くことでチーム開発はもちろん、個人開発においてもコードをリファクタリングしたり、バグを発見したりする際に重要な役割を果たします。 Vue3 から新たに登場した Compostion API を利用することで、より保守性の高いコンポーネントを定義することができます。 コンポーネントをテストする場合、一般的にはテストコードを実装からできる限り切り離すように作成します。 理想的なのはコンポーネント内のロジックなどを考慮せずに実施するブラックボックス的なテストを書くことです。 はじめに 本記事では Vue3 でのテストコードの作成方法について解説しております。 Vue2 では Vue.e
Composition APIだけではない、Vue 3の新機能（2） コンポーネント内容を任意の場所に移動するTeleport Teleportは、コンポーネント内容の一部を、Webページ内の任意の場所に移動（テレポート）する機能です。モーダルダイアログやポップアップなど、コンポーネント外部に記述する必要があるHTML要素に、コンポーネント内容を反映する場合などに利用できます。図2のサンプルでは、コンポーネント内容の一部を、コンポーネント外（index.htmlに記述したHTML要素）にテレポートしています。 図2 Teleportのサンプル（p002-teleport） コンポーネントの<template>部をリスト3に示します。（1）の通り、移動させる内容を<teleport>タグで囲み、to属性にテレポート先のCSSセレクター（ここでは「teleport-target」ID）を指定し
Vue3のウォッチャーを見てみる - Qiita
Vue.js 3 の watch と watchEffect について Vue.js 3には、リアクティブなデータを監視して何らかの処理を実行するための2つの主な機能があります。それらはwatchとwatchEffectです。以下でそれぞれの特徴と使い方について解説します。 watch の基本 watchは、指定したリアクティブなプロパティまたは計算プロパティの変更を監視し、その変更に応じて処理を実行します。 特徴 ・監視するプロパティを明示的に指定します。 ・以前の値と新しい値の両方を取得することができます。 例 import { watch } from 'vue'; watch(someRef, (newValue, oldValue) => { console.log('新しい値:', newValue, '以前の値:', oldValue); }); watchEffect の基
Vue3.2のdefineCustomElementで子要素のSFCのstyleも含めてWebComponents化する
何この記事？ Vue3.2 で Vue Component を Web Components にする defineCustomElement が提供された。 <style>を持つ SFC を子要素以下にもつ SFC を Web Components 化する場合、現行(v3.2.1)の機能では追加で作業が必要。 defineCustomElement ref. Vue and Web Components - Building Custom Elements with Vue Vue v3.2.0 の新機能として defineCustomElement が提供されました。 これは Vue component から Web Components (正確には customElements#define するための CustomElement) を作成するためのメソッドです。 const MyVu
先日、個人のブログサイトをリニューアルしました。 その際にブログを作る上でのCMS選定をかなり色々悩んだのと、Vue3を使ってみての知見をまとめます。ソースコードはGitHubにあります。一応、フロントエンドエンジニア向けの内容です。 実現したかったこと 更新の楽さ 記事はMarkdownで書きたいです。また、記事の中に画像を⌘Vでペーストしたいですね。 AMP対応 SEO・読み込み速度向上のために、ブログ記事はAMP形式で公開したいです。 SNSのOGP対応 (SeverSideRendering/StaticSiteGnerate) Googleのクローラが賢くなっているので、SEOの目的だけでSSRする必要性は低くなっているらしいです。ただ、TwitterなどのSNSで記事画像をOGPプレビューするためには、SSRやSSGの対応が必要になります。 他のサイトに投稿した記事も自サイトの
ロンラン株式会社 CEO 兼 CTO の武部です。 Vue 2 & Vuetify 2 で開発していた当社の主力製品のひとつを Vue 3 & Vuetify 3 へと移行しました。 記念すべき CLOSE 済み PR 今現在は、最新の Vuetify 3.0.4 で安定動作しており、開発も Vue 3 & Vuetify 3 を前提としたワークフローへ移行し、快適です。 コード変化量は +21,471 行、-14,585 行。修正ファイル数は 183 ファイルで収まりました。 リードタイムとしては 2 週間程度、作業時間としては、うーん...合計 60 時間ぐらいかな？ フロントエンドエンジニア二名で対応しましたが、95% ぐらいはひとり（私）が対応しています。 事前に、移行を見据えた情報キャッチアップやできる範囲での移行は進めていたため、割とスピーディに対応できた方だと思います。 こ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【AWS】Amplify・Vue3での認証機能構築方法
Vue3リリース間近!!「UIT meetup vol.10 Vue 三昧」参加レポート
Vite + Vue3にESLintとPrettierを導入する
Vue 3 State Management – Ghiura Alexandru
新Vue.js「Vue 3」で便利に使えるさまざまな新機能を先取りで紹介
Vue 3 + Hugo でSPAかつSEOにつよいブログサイトを作る
主力製品の Vue 3 & Vuetify 3 へのマイグレーション全記録