Vue.js

2021年5月4日

Vue.jsでフォームを作成する方法をみていきましょう。

vscodeでtailwindcssを使っているとき、@applyを使うと下のようなerrorが表示される場合があります。その場合の解決策です。

Vueでtailwindcssを使っているときに、SVGアイコンを使う方法を紹介します。

Vue.jsでコンポーネントをv-forでループさせたい場合のやり方を紹介します。
下の例では、tailwindcssでSVGアイコンを使った場合のアイコンコンポーネントをループしてそれぞれ適用させます。 ...

Vueでtailwindcssで再利用性の高める方法を紹介します。

tailwindcssをカスタマイズする方法を紹介します。

Vue 3でtailwindcssを使う方法です。

Vue 3でtailwindcssを使う方法vueプロジェクトの作成vue create プロジェクト名

まずはvueプロジェクトを作成します。 ...

Vue v3とtailwindcssを使って、垂直スクロールで画像が水平に動くアニメーションを作る方法を紹介します。

tailwindcssの導入

tailwindcssの導入方法は、Vue 3でtail ...

Vueのv3を使っていて、下のエラーが出ている場合の対処方法です。

エラー内容vue-composition-api.esm.js?a6f4:64 Uncaught (in promise) TypeErro ...

Nuxt.jsで.envファイルを使う方法です。

Nuxt.jsで.envファイルを使う方法dotenvをインストール

まずはdotenvをインストールします。

npm install @nuxtj ...

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

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

uuidが含まれていれば、下のインポートから始めます。

no ...

Nuxt.jsでmoment.jsを使う方法を紹介します。

Nuxt.jsでmoment.jsを使う方法moment.jsをインストールnpm install momentVue.filter()を使用してカ ...

Nuxt.jsとfirebase(ログイン/ログアウト機能)を実装する方法です。

Nuxt.jsとfirebase(ログイン機能)

Nuxt.jsでfirebaseを使う方法はNuxt.jsでfireba ...

Nuxt.jsをインストールからfirebaseを使えるようになるまでにすることをまとめました。

Nuxt.jsの設定Nuxt.jsのプロジェクトの作成npx create-nuxt-app

でNuxt. ...

Vueでの.env.localの使い方です。
.env.localファイルを使うことで、GitHubでソースコードをあげても、APIキーなど大切な情報の漏洩を防ぐことができます。

Vue.js v2でaxiosを使ってAPIデータを取得してグリッド表示とリスト表示を切り替える方法を紹介します。
Vue 3でも考え方は使えます。

表示を切り替える方法

今回はボタンを押すと、グ ...

Vuex + axiosを使って、追加・削除・更新・フィルターといった基本的なAPI操作方法(CRUD)を紹介します。

Vuexについてと、Vue.js v2におけるVuexの基本的な使い方をまとめました。

Vuexとは

Vuexはライブラリ・ステイトマネジメントパターンです。
ステイトというのは状態と言われますが ...

Vue.jsの$emitを使って子コンポーネントから親コンポーネントへの値の受け渡し方法をまとめました。

$emitとイベント修飾子の使い方例1

Todoアプリで子のclickイベントを親に渡したいとしま ...

Vue.jsのpropsの使い方です。
簡単な例から見てみましょう。

props

todoアプリの場合をみてみます。
App.vueとTask.vue、TaskItem.vueという2つの ...

Vue.jsでライブラリを使わずに進捗バーの表示するシンプルな方法です。
基本はJavaScriptのため、考え方は他のフレームワークでも生のJavaScriptでも同じです。

Vue jsの:classと:styleについて簡単に違いをまとめました。

データのひと塊のみを表示して次へボタンで次のデータを表示する方法を紹介します。
Vue 2の書き方ですがVue 3でも考え方は同じです。

v-forで選択されたアイテムを取得して表示する方法です。
Vue2のコード例ですが、考え方はVue 3でも同じです。

OpenWeatherMapのapiで過去、現在、未来予測の天気の情報を取得することができます。
無料から使い始めることができる点でも使いやすいです。
Vue.jsでOpenWeatherMapで天 ...

QuasarのIcon Genie CLIを使うとアイコン（ファビコン）をデスクトップ、macandroid、iphone用に一括して作成することができます。Icon Genieのインストール方法、アイコン(ファビ ...

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

Firebase+Vue.js(Vue3 Composition API)でログイン/サインアップフォーム作成する方法です。

JavaScriptでパスワードベースのアカウントを使用してFirebase ...

Vue 3から導入されたComposition APIでasync-awaitを使う方法をまとめました。
async-await自体の使い方は、こちらの記事を参考にしてみてください。
JavaScr ...

Vue 3から新しく導入されたComposition APIの基本的な使い方をまとめました。

Vue 3 Composition APIの基本的な使い方Options APIとComposition APIの ...