Nuxt.js
はじめに webアプリを開発中に v-for についていまいち理解し切れていないと感じたので、じっくりと考えてみる。 なお、今回はCLI ではなく CDN にて動作確認をするので、すべてのソースに https://unpkg.com/vue@next を読み込んでいる。 まずは v-for って…
はじめに Firebase に送ったデータの管理でタイムスタンプが必要になったので、データの送信時に現在時刻を送れるようにした。 やったこと <template> <input type="hidden" v-model="checkTime"> </template> <script> export default { props: ["user"], data() { return { chekTime: new Date(), }; }, } </script> このコードだと管理がで…
axiosとは axiosとはブラウザやnode.js上で動くPromiseベースのHTTPクライアントです。 jQueryで言うところのjQuery.ajaxであり、非同期にHTTP通信を行いたいときに容易に実装できます。 Vue.jsでは非同期通信を行うのにaxiosを使うのがスタンダードとなって…
はじめに Nuxt.js でウェブアプリを作成している。 複数のリストを Firebase の Realtime Database に保存するというもの。 v-for を用い、リアクティブに配列に要素を追加し、最後にまるっとデーターベースに保存する。 問題発生 データーベースに保存する…
はじめに 過去記事でNuxt.js と Firebase の Realtime Database にデータを保存する処理を記載した。 >Nuxt.js でFirebase にデータを保存する ただ複数要素を保存する方法がわからなかった。 厳密にいえば、変動するデータ数の保存の仕方が不明だったので、…
前提 Firebase 側の設定を完了しておくこと。 >Firebase 側の設定について Nuxt.js 側の設定 コード <div class="form"> <input type="text" v-model="hoge"> <button @click="saveContent(hoge)">保存</button> </div> <script> import firebase from "~/plugins/firebase.js"; // △ https://blog-progblog-web.hatenablog.com/entry/2021/01/10/173554 の記事を…
前提 Nuxt.js と Firebase でログインシステムを構築しておく。 上記ログインシステムの構築方法は別記事にて記載している。 上記システムの仕組み まずは大枠 index.vue でコンポーネント(ログイン前) Hello.vue を表示する。 Hello.vue に組み込まれたGo…
前提 Nuxt.js と Firebase でログインシステムを構築しておく。 上記ログインシステムの構築方法は別記事にて記載している。 コード <template> <div > <h1>GOOD BYE</h1> <span>{{ user.displayName }}</span> <button @click="logout">ログアウト</button> </div> </template> <script> import firebase from "~/plugins/firebase.js"; export default { prop…
前提 Nuxt.js と Firebase でログインシステムを構築しておく。 上記ログインシステムの構築方法は別記事にて記載している。 概要 前提でやったこと まずは大枠 index.vue にHello.vue を表示する。 Hello.vue に組み込まれたGoogleログイン ボタンをクリッ…
前提 Nuxt.js と Firebase Googleアカウントログインの仕組みを作成しておく。 仕組みの作り方は別記事にて。 コンポーネントの構成 大枠 index.vue コンポーネント(ログイン前) Hello.vue コンポーネント(ログイン後) Goodbye.vue 仕組みを言語化 まず…
サンプルコード <template> <div id="onclickTest"> <button v-on:click="alert">クリック要素</button> </div> </template> <script> export default { data() { return {}; }, methods: { alert: ()=> { alert("hoge"); } } }; </script> <style> </style> 対象の要素でv-on:click="alert" を定義し、クリック時にmethods: 内にある定義済みalert を呼びだしている。 ちなみに…
Firebase でログイン設定をする手順 対象のFirebase console にアクセスする。 [ Authentication ] タブに移動する。 [ ログイン方法を設定 ] をクリックする。 [ ログイン プロバイダ ] のGoogle をクリックし[ 有効にする ]をクリックする。 プロ…
サンプルコード <template> <div id="test"> <p v-if="hoge">条件「hoge」は true です。</p> <p v-else>条件「hoge」は false です。</p> </div> </template> <script> export default { data() { return { hoge: true }; }, }; </script> <style> </style> 表示確認 上記コードの状態だと、下記表示になる。 条件「hoge」は true です。 hoge: true を hoge: false にす…
サンプルコード // index.vue <template> <div id="app"> <Hello v-if="!isLogin"></Hello> <Goodbye v-if="isLogin"></Goodbye> </div> </template> <script> export default { data() { return { isLogin: false }; }, }; </script> <style> </style> // Hello.vue <template> <div> <h1>HELLO</h1> </div> </template> <script>…
間違えると、時間を無駄にするので整理する。 npm run build node.js アプリをデプロイするときに使用する。 ファイルの生成場所 project/.nuxt/dist Node.js サーバにデプロイする時に使用 Heroku Digital Ocean … etc npm run generate アプリのデプロイだ…
コード npx nuxt -v // 出力結果 // @nuxt/cli v2.14.12 もっとシンプルに package.jsonでも確認することができる。 というより、こっちの方が圧倒的に早くバージョンを確認できる。 "dependencies": { "core-js": "^3.6.5", "nuxt": "^2.14.6" },
Nuxt.js をインストールする プロジェクトを作成する npx create-nuxt-app projectName まずは上記コードをターミナルに記入する。 projectNameはプロジェクトごとに指定する。 その後、いくつか質問されるので用途に合わせて選択していく。 プロジェクト名…