Nuxtで自前でapiサーバー建てつつ、コンポーネントのasyncDataでデータをフェッチするっていうのがやりたかった。 はじめに、プロジェクトディレクトリ直下に、apiというディレクトリを用意して、json用のルーティングを用意する。 // project/api/index.js …

プロジェクトを作成する。 % npx create-nuxt-app <project-name> herokuにアクセスして、アプリを作成する。 dashboard.heroku.com heroku CLI で、ログインする。 % heroku login ログインしたら、gitにリモートリポジトリを追加する。 % heroku git:remote -a <herokuで作ったアプリの名前> % git re</herokuで作ったアプリの名前></project-name>…

アニメFGOバビロニア面白いですよね。えぬわいです。こんな感じになりました。その人のページは、URLにuidを設定して、移動する。UIがしょぼいので、もうちょっと綺麗にしたい。機能的にもっと色々つけられそうなので、やって行きたい。常にtipsをまとめてる…

好きなプリキュアシリーズはハグっとプリキュア。えぬわいです。 vueのv-forディレクティブとjavascriptのforが個人的にだいぶ違ってて、イライラしてしまったんですよね。javascriptの時は、 const dict = { a: 'x', b: 'y'} for (const x in dict) { conso…

blog.ikedaosushi.com この人のをベースに進めてたんだけど、plugins/firebase.jsでfirebase.auth()をexportすると、pages内で、firebaseでsignInWithPopup()を呼ぶのに、import { auth } from 'firebase'もやらないといけないので、pluginsから引っ張ってる…

やりたいことリストに firebaseのtwitter認証を追加した。 あらかじめ、twitter developperのサイトからapiキーとシークレットをfirebase consoleに設定しておいて、コールバックをfirebase consoleから登録する。 vue側では、 const provider = new firebas…

Todoやり終わったので、次作ったら便利そうなやりたいことリスト作る。 今回は、最初、UIは最低限でやってみる。 付けたい機能としては、 認証されてる状態で自分のページに行くと、編集内容、公開される内容を表示する 認証されてない状態では、公開内容だ…

Nuxt.js と firebase realtime で、Todoを作った。 機能としては、 認証(firebase authentication) todoの追加、削除 ブラウザからのrealtime databaseの更新(単方向) changed listenerみたいなの登録すれば、双方向も難しくなさそう。 firebase realtime da…

結果的にこんな感じになった。 <div class="d-flex flex-row align-baseline"> <v-text-field ref="comment" label="Todo" outlined /> <v-btn class="ma-2 pa-2" outlined color="success"> Add </v-btn> </div> align-center をつけてたんだけど、一向に揃わないから試してたら、これが良さそうだった。参考画像でつ。 今日のtips 単方向参照 vue から、フォームにアクセスする際、片方向の参照だけしたい場合は、

firebaseで認証を実装しました。めっちゃ楽でした。前にdjangoで自前の認証を実装することがありましたけど、比じゃねぇってくらい簡単でした。設定周りは、vueの chat チュートリアルを参考にするのがいいと思います。cr-vue.mio3io.com猫ちゃん可愛い...今…

todoを作ってる。 今日は、vuetify からチェックボックス追加して、vuex から初期値をバインドした(v-model) こんな感じ。 今日のtips var hoge = { a:a, b:c } っていうのがあると、lintで怒られる。 var hoge = { a, b:c } obj-shorthand というらしい。(…

vuetifyの仕組みがちょっとだけわかった気がした。 Nuxt.js では、最初にvuetifyでプロジェクトを作成すると、layoutsディレクトリにdefault.vueが自動で作成される。これがルートのvueファイルになる。 Nuxt.js では、<nuxt />を使うと、vueの<router-link />ができるようになる。 </router-link></nuxt>…

Todoでも作ることにした。 Vuetifyの扱い方がいまだに少しわかんないんだけど、ちょっとずつやる。 今日はUIいじった。 プロジェクトディレクトリのlayoutが実際のエントリーポイントとして用意されているみたいだ。 カードレイアウトの隙間が作れなくて詰ま…

Nuxt.js は、フロントエンドとバックエンドをまとめて管理してくれるフレームワークっぽい。 twitter 関連の何かをやろうとすると、どうしてもバックエンドが必要になってくるので、勉強します。 npx create-nuxt-app <project-name> これで、nuxtのプロジェクト作成 npm r</project-name>…

npxとは ローカルにインストールした npm パッケージ を、npx コマンドだけで実行できるようになる https://qiita.com/tonkotsuboy_com/items/8227f5993769c3df533d ってことは % npx vue-cli-service serve --https で起動できるわけだ。yarn に依存しない…

httpsにする必要が出てきたので、httpsにする方法を調べてた。 結果的に、 yarn serve --https これか node_modules/.bin/vue-cli-service serve --https でhttps起動できる。 npm run serve --https これだと設定上できない。変えればできるのかな。 証明書…

vue create <project-name> <project-name>という名前のプロジェクトが作られる vue add <plugin> 既存プロジェクトに、vue-cli3のプラグインを追加する。 vue-cli3 は、@vue/cli-plugin- で始まるプラグインのこと。 この時、generator[s]も起動される。generator[s]とは、パッケージのインスト</plugin></project-name></project-name>…

寝てないので普通に限界なんですけど、ちょっとしたことでも書いてやる。 vue を触っていく上で、欠かせないのが、npmパッケージマネージャでして。 どうやって作るんかな〜っていうのを眺めてた。 mkdir sample-module 先に、ディレクトリ作る cd sample-mo…

vueとfirebaseでチャットアプリを作った。 観たのはこのサイト cr-vue.mio3io.com 爆速で作れるのすごいと思った。 firebaseで使用したのは、twitter認証とrealtime database。 単純に埋め込んだだけなので、UIはご勘弁。 firebaseの api key の公開とかわか…

長いから3行で vue-cli 3 でTodo書いた component化した githubにデプロイした b1u3-yumanoguchi.github.io こちらになります。 参考にしたのはここ cr-vue.mio3io.com