Vue.js – devs

Vue.js

Vue 3でスクロールすると出てくる「トップへ戻る」ボタンの作り方

Vue 3(Composition API)でスクロールすると出てくる「トップへ戻る」ボタンの作り方を紹介します。scrollイベントとwindow.scrollYで表示を切り替え、scrollToでなめらかに先頭へ戻します。

更新 2026.08.22 8分で読めます

Vue.js

Nuxt.jsでassetsのcssをグローバルにスタイルを適用する方法

Nuxt.jsでassetsのcssをグローバルに適用する方法を紹介します。nuxt.configのcss配列にファイルパスを書くだけで全ページに反映され、Nuxt 3以降のnuxt.config.tsでも同じ書き方です。

更新 2026.08.22 3分で読めます

Vue.js

Vueのcomposition APIのエラー:Cannot read property ‘util’ of undefined

Vue 3でCannot read property 'util' of undefinedが出るときの対処方法です。原因はVue 2用プラグイン@vue/composition-apiのimportで、'vue'からimportし直せば解決します。Vue 2.7以前との違いも整理します。

更新 2026.08.22 4分で読めます

Vue.js

Nuxt.jsで複数のlayoutsファイルを作成して適用する方法

Nuxt.jsで複数のlayoutsファイルを作成して適用する方法を紹介します。layouts/に新しいVueファイルを置き、ページ側でlayoutプロパティ（Nuxt 3ならdefinePageMeta）を指定するだけで切り替えられます。

更新 2026.08.22 4分で読めます

Vue.js

Vue.jsでライブラリを使わずに進捗バーの表示する方法

Vue.jsでライブラリを使わずに進捗バーを表示するシンプルな方法です。dataのパーセントを:styleのwidthに渡し、ボタンのクリックで進める仕組みなので、考え方は他のフレームワークでも生のJavaScriptでも同じです。

更新 2026.08.22 4分で読めます

Vue.js

Vue2でタブとモーダルを作成する方法(Bulmaフレームワーク)

Vue2でタブとモーダルを作成する一例を紹介します。 Vue2でBulmaのcssフレームワークを使ってタブとモーダルを作成します。

更新 2026.08.22 7分で読めます

Vue.js

vscodeでtailwindの@applyを使うとerrorが表示されるときの解決策

VS Codeでtailwindcssの@applyを書くと「Unknown at rule」のerrorが表示されるときの解決策です。公式推奨のTailwind CSS IntelliSenseと、PostCSS Language Supportの2通りを紹介します。

更新 2026.08.22 2分で読めます

Vue.js

Vue.jsで要素がスクロール画面に現れたらアニメーションさせる方法

Vue.js(Vue 3)で要素がスクロールして画面に現れたらアニメーションさせる方法です。IntersectionObserverをref・onMountedと組み合わせ、数字がカウントアップする例で、監視の開始・停止と動かないときの確認点まで説明します。

更新 2026.08.22 8分で読めます

Vue.js

【Vue】tailwindcssでSVGアイコンを使う方法

VueとTailwind CSSでSVGアイコンを使う方法を、Heroicons(@heroicons/vue)を例に解説します。npmでのインストール、v1とv2のimportパスの違い(24/outline・24/solid)、script setupでの書き方、サイズ・色の指定、表示されないときの確認ポイントを紹介します。

更新 2026.08.22 5分で読めます

Vue.js

Nuxt.jsのnuxtServerInitアクションの使い方

Nuxt.jsでVuexを利用しているとき、fetch()によってコンポーネントがロードされるたびにサーバーサイドレンダリングでデータを取得したくない場合があります。最初の一度だけサーバーサイドでレンダリングしたいときに、Nuxt.jsの特別なアクションであるnuxtServerInitを使います。

更新 2026.08.22 6分で読めます

Vue.js

Nuxt.jsでuuid(v4)を使う方法

Nuxt.jsでuuid(v4)を使う方法です。npm install uuidからimport { v4 as uuidv4 }、uuidv4()での生成、標準のcrypto.randomUUID()との使い分け、動かないときの確認点までまとめました。

更新 2026.08.22 4分で読めます

Vue.js

Vue3 CompositionAPIでクリップボードにコピーする方法

Vue3 CompositionAPIでクリップボードにコピーする方法を紹介します。標準のnavigator.clipboard.writeText()で済ませる最短の書き方と、clipboard.js・vue-clipboard3を使う方法をまとめました。

更新 2026.08.22 6分で読めます

Vue.js

Nuxt.jsで日付をフォーマットする方法

Nuxt.jsで日付を「2021年7月15日」のように整形する方法です。Nuxt 2ではpluginsでVue.filterを登録してテンプレートで使い、フィルターが廃止されたNuxt 3ではutilsの関数とIntl.DateTimeFormatで同じ表示にします。

更新 2026.08.22 6分で読めます

Vue.js

Vue 3で画像を表示する方法｜Viteのassets・public・動的srcを解説

Vue 3 + Viteで画像を表示する方法を解説します。src/assetsの静的import、public、動的な:src、new URL、import.meta.glob、CSS背景画像、@ alias、require・~@が動かない理由、Nuxt 4との違いと本番buildの404対策まで整理します。

更新 2026.08.22 18分で読めます

Vue.js