【Vue3】GTM（Googleタグマネージャー）を設置する
はじめに Vue3でSPA（シングルページアプリケーション）を作成する際にGoogleタグマネージャーを利用してページビュートラッキングを取る方法についてご紹介します。 以下、GoogleタグマネージャーをGTMと言います。 1. GTM コンテナIDを取得 Googleタグマネージャーでコンテナを作成し、コンテナID（GTM-xxxxxxx）を取得しておいてください。 2. Vueアプリケーションインストール Vue公式リファレンスの通りにインストールを実行してください。 3. Vue GTMプラグインをインストール Vueアプリケーションのインストールが完了したら、次はVue版GTMプラグインのインストールをしていきます。 👇 プラグイン説明 本プラグインはVue3系以上から利用できるVue版GTMプラグインとなります。 また、VueRouterと連携した画面の自動追跡も可能なので、
Vue3 コンポーネントのテスト
コンポーネントのテストをするのフレームワークとしてJest、vue-test-utils 2を利用します。Vue2系をターゲットにしているvue-test-utils 1とは一部APIが異なります。 Component の単体テストは書くべきでしょうか？UI のテストは割りに合わない、ロジックはコンポーネントの外のモジュールに記述している（特に composition API では）などの理由から、コンポーネントに対するテストは書かない選択肢もあるでしょう。 とはいえ、やはりテストが書いてあると変更を加えた際に安心できるものです。コンポーネントのテストをするのフレームワークとしてJest、vue-test-utils 2を利用します。Vue2 系をターゲットにしているvue-test-utils 1とは一部 API が異なります。 なにをテストするのか コンポーネントのテストは、詳細には触
Vue Test UtilsでStub(スタブ), axiosのMock(モック), ShallowMountを理解
本文書はJestとVue Test Utilを利用したVue.jsでのテストに関する2回目の記事で2回目となる今回はテスト入門者にとって少しわかりずらいStub(スタブ)やMock(モック)、Shallow Mountに注目して説明を行っています。 Stub, ShallowMountとMountの違いを説明した後にVue.jsのHTTPリクエストで頻繁に利用されるaxiosのMock(モック)の方法についても説明を行っています。コンポーネントの単体テストでは、axiosライブラリやfetch関数を利用した外部へのアクセスを伴う機能を実装している場合モックを利用することで外部へのアクセスを行うことなくコンポーネントのテストを実施することができます。 Vueでのテストを実施したまたは学習した経験がない人であれば先に前回公開した”【基本編】Jestを利用してVue コンポーネントをテストする方
【Rails7+Vue3】Vue.jsの自動テストを導入するまで
はじめに 今回、Rails＋Vueで作っているWebアプリに、Vueの自動テストを導入することになり、試行錯誤しました。 せっかくなので、備忘録代わりに置いておきます。 「Vue 自動テスト」で検索すると、TypescriptやらVue-cliやらの話が結構引っかかりますが、今回は両方とも使っていません。 環境 rails 7.0.2.3 vue.js 3.2.37 参考ドキュメント バージョンは古いですが、結局本家のドキュメントに一番助けてもらいました。 ちなみに、新しいバージョンのドキュメントは2022.11.21現在、なぜか閲覧できません。。。 使うテストツール vue-test-utils Vue標準のテストライブラリです。 Jest vue-test-utilsで書いたテストを実行するテストランナです。 公式ドキュメントで一番上に書いてあったし、弊社ではフロントエンドテストの実績
Vue2のプロジェクトをVue3へマイグレーションする
Vue 3が正式リリースされてから約1年が経過しました。 Vuetifyのリリース目標である2021年Q3も近づく中でそろそろVue3へのアップデートを検討されている方もいらっしゃることでしょうか？ この記事ではVue 2からVue 3への移行手順を記述していきます。 参考用のプロジェクトとして以下レポジトリを用意しました。 Vue 2からの移行を体験してみたい場合には、vue2-todo-appのタグにチェックアウトしてください。 移行ビルドを使用する Vue 2からVue 3へ移行するためのツールとして、公式から@vue/compatが提供されています。 @vue/compatを使用すると、Vue 2モードで動作するため、Vue 3で削除や非推奨になったAPIも一部の例外を除いてそのまま使用することができます。Vue3 で削除で非推奨になった機能は実行時に警告が出力されるようになります
Vue3の<script setup>は選択肢のひとつだよね、という考察 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? [6/8 12時頃追記] Vueは死んでないし殺すつもりもないし私はVueが大好きだ、誤解しないでほしい Vue3でOptions APIは消えてないし今後消えていく方向のAPIでもないし挫折した人もこっちつかって再挑戦してほしい [6/8 11時頃追記] 「俺はComposition API使えてるぞ！」「便利じゃん！何をいってるんだこいつは！」 あなたはすごい、でもVueを挫折した人の話を聞くに、Composition APIが「アタリマエでしょ？」の雰囲気の前にうまく馴染めず散っていったという話で、Composition API自
既存のVue.jsプロジェクトをVue 3へ移行したときに必要だった修正まとめ - Qiita
はじめに この記事では、「既存プロジェクトをとにかくVue3へ移行して元通り動くようにする」が目的です。 「Composition APIで書き換える」といったVue 3の新機能への移行を紹介するものではありません。 公式のマイグレーションガイドはこちら: https://v3.vuejs.org/guide/migration/introduction.html#quickstart 執筆時点ではVue3.0.0ですが、ここに書く問題は以降のバージョンで解決している可能性もあります。 もしお気づきの際はコメントいただけると幸いです。 雑感、設定やプラグイン周りで新しい仕様に合わせなければいけないところがありますが、コンポーネント資材は大部分がそのまま動作すると思います。 1日2日もあればとりあえず動作するところまでは持っていけるかと思います。 追記 2020/09/26: ドキュメントか
Vue Pinia の基本的な使い方
Vue の基本的な使い方 (5) Pinia を使って状態管理 Pinia を利用すると、複雑な Vue 3 の状態管理（コンポーネント間のデータの受け渡しやデータの共有など）が簡単に行なえます。以下は Pinia の基本的な使い方についての解説のような覚書です。 関連ページ Vue の基本的な使い方 (1) Options API Vue の基本的な使い方 (2) Composition API Vue の基本的な使い方 (3) Vite と SFC 単一ファイルコンポーネント Vue の基本的な使い方 (4) Vue Router ルーティング Vue の基本的な使い方 (6) Vue3 で簡単な To-Do アプリを色々な方法で作成 Vue の基本的な使い方 (7) Vue Router と Pinia を使った簡単なアプリの作成 Pinia とは Pinia とは、Vue で扱うグ
Vue.js の状態管理ライブラリ Pinia の使い方まとめ
この記事は公式チュートリアルの内容、開発中に実際に困ったポイント、その解決方法などを中心にしつつ自分へのメモを主目的としてまとめていくものです。随時追記していきます。 ちなみにもう僕は Pinia 最高派です 🍍 Vuex と Pinia 2021 年終盤、これまで Vue 公式で推奨されていた状態管理ライブラリが Vuex から Pinia に変わりました。 例えば Vetur -> Volar は当時でも言われて久しい感じでしたけれど、Vuex に対する Pinia という名前はだいぶぽっと出だったので混乱した人も多いと思われます。 これまで Vue 3 に対して公式にサポートされていた状態管理ライブラリは Vuex 4 というものですが、これの次世代バージョン、つまり Vuex 5 の検討内容が Pinia の根底にあるものです。 …というのは実はやや語弊があり、実際には「新しい状
Vue2系からVue3系に移行しました〜！ - Link and Motivation Developers' Blog
こんにちは！リンクアンドモチベーションでフロントエンドの開発をしています。岡田（@okadaike）です。 本日は弊社プロダクトのストレッチクラウドのVueのversionを2系から3系にmigrationしたので、そのご報告になります！！ 今回はプロダクトチームの中で色々と試行錯誤して進めました！ストレッチクラウドはSPAが3つあるような構成になっており、今回はそのうちの一つを移行しました！。 最後に残りの２つの移行計画もまとめようと思います！ Vue2は2023年末にEOLを迎えるのでこれからどんどん移行していくことになると思いますが誰かの役にたてればなと思います！ ※余談ですが先日Vue.js v-tokyo meetup#16に参加してきました。その中で世界のアクティブVueユーザーの内6~7割はVue2を利用していると伺いました。 今年のこれからはVueのmigration祭りに
script setupでbeforeRouteEnter - vue3, composition api - jabelic-public
const { data } = useFetch(/your/url/${to.params.your_route_params})
Vue2 + pinia
vue2でもcomposition apiを入れていればpiniaを使えるということで、 早速実装してみました。 追記）composition apiを入れてなくても使えるようになっているみたいです。 公式のしたがってインストールから実装までやっていきたいと思います。 (typescriptにも対応していますが、この記事ではjavascriptを例に書いています） Step 1 インストール import Vue from "vue" import App from "./App.vue" import router from "./router" import VueCompositionApi from "@vue/composition-api" import vuetify from "./plugins/vuetify" import { createPinia, PiniaVu
【Vue.js】Composition APIを使用した共通関数の作り方 - プログラマーノート
はじめに mixisは共通関数としてどうなのか vue.jsで共通関数をどう作るか 共通関数のメリット Composition APIで使用可能 オブジェクト指向的に考えられる どこから呼び出したのか分かりやすくなる まとめ はじめに こんにちは。エンジニアの仕事をしている、たかふみです。 本日は、vue3より正式導入された、Composition APIを使用した共通関数の作り方についてまとめたいと思います。 Composition APIを共通化する際に、参考としてください。 mixisは共通関数としてどうなのか vue.jsには、mixinsという機能がありますが、mixinsには以下のデメリットがあります。 Options APIで動く想定なのでComposition APIでは使いにくい。 オブジェクト指向的に考えると複数のインスタンスを持てない。 グローバル定義した場合、どこで
Vue3時代にviteでvue2をビルドする
もうSvelteでええやｎ ------------------- ↓ 前書きはここから ↓------------------- Svelteを使うようになってから、 すっかりご無沙汰のvue。 vue3の考え方にあまり賛同できず、 世間もReact一色になりつつある vue2が急に必要になったので、 じゃあ、ビルドを整理するかと思ったら、 気がついたらvueのバージョン3がstableになっていて、 世の中全部がvue3になっていた。 そこでvue3の時代にvue2をビルドする方法を残しておく。 ビルドツールはvite。 rollupとesbuildベースのの高速ビルドツールでvue公式がサポートしている。 ヾ(・ω<)ﾉ" 三三三● ⅱⅲ コロコロ♪ ------------------- ↓ 本題はここから ↓------------------- プロジェクト作成 この手のビルド
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Vue3】Jest & Vue Test Utils 詳解 チュートリアル
Vue Test Utils
Vue3でBootstrapとBootstrap Iconを利用する
【nuxt】vue-slickでカルーセルスライダーを実装する2 | aktmm-dev
【nuxt】vue-slickでカルーセルスライダーを実装する | aktmm-dev
既存のVue.jsプラグインがVue 3で使えない場合の対応 - Qiita
