Vue.js
Vue 3でスクロールすると出てくる「トップへ戻る」ボタンの作り方
Vue 3(Composition API)でスクロールすると出てくる「トップへ戻る」ボタンの作り方を紹介します。scrollイベントとwindow.scrollYで表示を切り替え、scrollToでなめらかに先頭へ戻します。
ARCHIVE
月: 2021年5月
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以前との違いも整理します。
Vue.js
Vue.jsでライブラリを使わずに進捗バーの表示する方法
Vue.jsでライブラリを使わずに進捗バーを表示するシンプルな方法です。dataのパーセントを:styleのwidthに渡し、ボタンのクリックで進める仕組みなので、考え方は他のフレームワークでも生のJavaScriptでも同じです。
Vue.js
vscodeでtailwindの@applyを使うとerrorが表示されるときの解決策
VS Codeでtailwindcssの@applyを書くと「Unknown at rule」のerrorが表示されるときの解決策です。公式推奨のTailwind CSS IntelliSenseと、PostCSS Language Supportの2通りを紹介します。
Vue.js
Vue.jsで要素がスクロール画面に現れたらアニメーションさせる方法
Vue.js(Vue 3)で要素がスクロールして画面に現れたらアニメーションさせる方法です。IntersectionObserverをref・onMountedと組み合わせ、数字がカウントアップする例で、監視の開始・停止と動かないときの確認点まで説明します。
CSS
【SCSS】background-imageで画像配列をforループ文で表示させる方法
SCSS(SASS)の@forループで、連番の画像をbackground-imageに順番に指定する方法を紹介します。through・toの違い、#{}インターポレーションの使い方、10枚以上のときのゼロ埋め、Dart Sassでの動作まで説明します。
Vue.js
【Vue】tailwindcssでSVGアイコンを使う方法
VueとTailwind CSSでSVGアイコンを使う方法を、Heroicons(@heroicons/vue)を例に解説します。npmでのインストール、v1とv2のimportパスの違い(24/outline・24/solid)、script setupでの書き方、サイズ・色の指定、表示されないときの確認ポイントを紹介します。
Vue.js
Nuxt.jsでuuid(v4)を使う方法
Nuxt.jsでuuid(v4)を使う方法です。npm install uuidからimport { v4 as uuidv4 }、uuidv4()での生成、標準のcrypto.randomUUID()との使い分け、動かないときの確認点までまとめました。
Vue.js
Vue.js v2の基本操作まとめ
Vue.jsの基本操作についてまとめました。 Vue.jsの基本操作まとめ v-on v-onは@で省略可能です。 See the Pen v-on:click by Sosak (@Sosak2021) on Code…
Vue.js
Vue.jsのtransitionでJavaScriptフックを使ってより複雑なアニメーションを適用する
Vue.jsのtransitionでJavaScriptフックを使ってより複雑なアニメーションを適用する方法を紹介します。
Vue.js
【Vue】動的にコンポーネントを切り替えたい場合(is属性)
Vue.jsでコンポーネントをv-forでループさせたい場合のやり方を紹介します。 下の例では、tailwindcssでSVGアイコンを使った場合のアイコンコンポーネントをループしてそれぞれ適用させます。
Vue.js
Vue 3でtailwindcssを使う方法
Vue 3でtailwindcssを使う方法です。 Vue 3でtailwindcssを使う方法 vueプロジェクトの作成 vue create プロジェクト名 まずはvueプロジェクトを作成します。 tailwindc…
Vue.js
【Vue3+tailwindcss】垂直スクロールで水平アニメーション
Vue v3とtailwindcssを使って、垂直スクロールで画像が水平に動くアニメーションを作る方法を紹介します。 tailwindcssの導入 tailwindcssの導入方法は、Vue 3でtailwindcssを…
Vue.js
Nuxt.jsで.envファイルを使う方法
Nuxt.jsで.envファイルを使う方法です。 Nuxt.jsで.envファイルを使う方法 dotenvをインストール まずはdotenvをインストールします。 npm install @nuxtjs/dotenv .…
Vue.js
Nuxt.jsでmoment.jsを使う方法
Nuxt.jsでmoment.jsを使う方法を紹介します。 Nuxt.jsでmoment.jsを使う方法 moment.jsをインストール npm install moment Vue.filter()を使用してカスタマ…
Vue.js
Nuxt.jsとfirebase(ログイン/ログアウト機能)
Nuxt.jsとfirebase(ログイン/ログアウト機能)を実装する方法です。 Nuxt.jsとfirebase(ログイン機能) Nuxt.jsでfirebaseを使う方法はNuxt.jsでfirebaseを使う方法を…
Vue.js
Nuxt.jsでfirebaseを使う方法
Nuxt.jsをインストールからfirebaseを使えるようになるまでにすることをまとめました。 Nuxt.jsの設定 Nuxt.jsのプロジェクトの作成 npx create-nuxt-app [プロジェクト名] でN…
Vue.js
APIキーなどの漏洩を防ぐVueでの.env.localの使い方
Vueでの.env.localの使い方です。 .env.localファイルを使うことで、GitHubでソースコードをあげても、APIキーなど大切な情報の漏洩を防ぐことができます。
Vue.js
APIデータを取得してグリッド表示とリスト表示を切り替える方法(Vue.js)
Vue.js v2でaxiosを使ってAPIデータを取得してグリッド表示とリスト表示を切り替える方法を紹介します。 Vue 3でも考え方は使えます。 表示を切り替える方法 今回はボタンを押すと、グリッド表示とリスト表示を…
Vue.js
Vuex + axiosでの基本的なAPI操作方法(CRUD)追加・削除・更新・フィルター
Vuex + axiosを使って、追加・削除・更新・フィルターといった基本的なAPI操作方法(CRUD)を紹介します。
Vue.js
Vuexの基本的な使い方(Vue. js v2)
Vuexについてと、Vue.js v2におけるVuexの基本的な使い方をまとめました。 Vuexとは Vuexはライブラリ・ステイトマネジメントパターンです。 ステイトというのは状態と言われますが、ほぼデータのことと最初…