Vue.js
Vueのキーイベントで@keydown.enterを設定すると、 日本語の変換中に押したEnterでも発火してしまう。。 なにも変換後のみに発火させたいなと思ったときの備忘録 日本語入力中とそうでないときはkeyCodeが違うらしい Qiita記事にすべて書いてあった。。 @key…
Google Tag Manager+Google AnalyticsをNuxtで使うときに、 ちょっとめんどうだったので、その備忘録。 タグマネージャで拾ってこれるのは、aタグとかのリンクとかHTMLベースだけ。。 なので、JavaScript側で行っているページ遷移とかは取れないのでよしなに…
これの続き。 www.memory-lovers.blog 前回導入したVeeValidateにカスタムバリデーションを追加したいと思い、 いろいろ調べたらv8nが便利そうだったので、使ってみた。 サンプルはTwitterIDのバリデーションの例 インストール $ npm install --save v8n カ…
フォームのバリデーションのため、VeeValidateを使ってみたときの備忘録 Nuxt.jsのコンポーネントで使う場合は、ちょっとめんどくさかった。。 フォームのバリデーションライブラリはいろいろある Vue公式ガイドでは、以下の2つが紹介されてた。 Vuelidate V…
Loaders.cssを使ってみたけど、display:inline-blockで使いにくかった。。 SpinKitというのもあるそうなので、そっちを使ったときの備忘録 SpinKitは、vue用のライブラリもあるよう(vue-spinkit) SpkinKit(vue-spinkitなし) インストール $ npm install --sa…
以下の記事で、数字がクルクルするアニメーションをやってみたけど、 SSRだとうまくいかないっぽい。。 そのときの備忘録。 www.memory-lovers.blog 初期表示がおかしい！！ TweenLiteを入れたページでリロードするとこんな感じに。。 Unexpected token expo…
ローディングアニメーションを用意しようと見てたら、Loaders.cssが良さそうだなと！ vue用のvue-loadersがあったので、Nuxt.jsに取り込んでみたときの備忘録 インストール $ npm install --save vue-loaders プラグインファイルを作る plugins/vue-loaders.…
Vue/Nuxtのv-forを使ったリストで削除するときに、 リスト要素が横にずれながら消えるアニメーションをしたいときの備忘録 ほぼ、Vueの公式ガイドに書いてあった。。 おぉリストのアニメーションもできた(*´ω｀*)削除時にふわっと横に消えていくヽ(=´▽`=)ﾉ公…
Vueの公式ガイドにある数字を変更すると、 数字がクルクルするアニメーションを使ってみたので、その時の備忘録。 Vueすごい。。TweenLiteすごい。。 おぉ数字がクルクルするアニメーションできた(*´ω｀*)Vueすげー TweenLiteすげーってなってる(*´ω｀*) pic…
またまた Nuxt公式サンプルから。 Vuex Store (using vuex-class) - Nuxt.js vuex-classを使うとStoreのState/Getter/Actionなどを アノテーションで紐付けれるらしい。。なにこれ、超便利。。 page/componentsの部分 こんな感じでできるよう。。すごい。。 …
SSRなNuxt、リロードするとstoreから認証情報が消えてしまい、 認証状態で初期レンダリングできないのつらいなとおもっていたら、 Nuxtのサンプルがよさげだったので、自分用に再整理してみた。 認証ルート - Nuxt.js ざっくりの方針 認証情報をStoreに保存…
Vue/Nuxtで開発しているときに、何度も調べなおすので、まとめてみた。 修飾子の一覧 <a v-on:click.stop="doThis"></a> <form v-on:submit.prevent="onSubmit"></form> <a v-on:click.stop.prevent="doThat"></a>
ライブビューイングできる勉強会があるようなので、初勉強会だけど参加してみた(´ω｀) いつもスライドだけ見てたけど、ライブ感すごい。。次は現地にいきたい。。 roppongi-vue.connpass.com www.youtube.com Roppongi.vueのふんいき はじまってます〜 #ropp…
Nuxt/Vue関連はドキュメントが充実しているのでよく見るけど、 毎回ググっているのがめんどくさくなってきたので、まとめてみた。 Nuxtのガイド/APIリファレンス ルーティング - Nuxt.js ビュー - Nuxt.js 非同期なデータ - Nuxt.js Vuex ストア - Nuxt.js A…
最近Bulmaがいい感じ。Awesome5をBulma/Nuxt.jsで利用するときの備忘録 インストール $ npm install --save nuxt-buefy @fortawesome/fontawesome-free-webfonts nuxt.config.jsの設定 { // CSSにFont Awesomeを追加 css: [ '@fortawesome/fontawesome-free-…
Nuxt.jsの2.5からTypeScriptサポートが強化された！！ でもプラグインを使う場合は、型定義が足りない場合がある。。 足りない型定義を追加したときの備忘録。 拡張するのは、以下の3つ nuxt-i18n @nuxtjs/axios @nuxtjs/google-analytics 基本的には、 tsco…
CircleCIでSPAなNuxt.jsをFirebaseへ自動デプロイしようとしたときに、はまったのでその備忘録。。 npm run buildしても、distディレクトリが。。 作られてない。。 npm run buildの中身は、rm -rf public && nuxt build && cp -R dist public CircleCIのロ…
Nuxt.jsでプロジェクトをはじめるときにいつもやることが整理してみた。 モジュールが多いので、いろいろ設定が必要だけど、ヌケモレあったりするので。。 Nuxt.jsのバージョンは、2.5.1です。 いつもやることの概要 作成したいプロジェクトは以下な感じ Typ…
Nuxt.jsでアプリを作っているときに、リストのドラッグ&ドロップしたいなと思ったときの備忘録。 Vue.Draggableでさくっとできた。 基本的な使い方 1. インストール $ npm i -S vuedraggable 2. .vueファイルにdraggableコンポーネントを追加 import draggab…
VuetifyでDrag&Dropしたい場合は、直でsortable.jsを使わないといけないらしい。。 $ npm i -S sortablejs import Sortable from "sortablejs"; export default { mounted() { this.$nextTick(function() { let table = document.querySelector(".v-datatabl…
Nuxt2.5でTypeScriptサポートが強化されました！！ でも、Nuxtクラスが少し変わったので、SSR時にCloud Funtctionsも少し変更が必要に。。その時の備忘録 [IMPORTANT] Migration Guide Programmatic API / Middleware If not already done, please explicitl…
Nuxt.jsでアプリ作るけど、やっぱり国際化大事。英語版と日本語版は作っておきたい。。 nuxt-i18nを使うと簡単に多言語対応できたので、その時の備忘録。 インストール $ npm install --save nuxt-i18n 設定 modules: [ ['nuxt-i18n', { strategy: "prefix_a…
Vue.jsとNuxt.jsでいろいろ作っているけれど、TypeScriptが素敵すぎる。。 create-nuxt-appだとTypeScriptがないので、TypeScript化するときにやることを整理したときのメモ TypeScriptが使えるように設定する 0. ディレクトリ構成 ディレクトリ構成はこんな…
Vue.jsでは、配列やオブジェクトの代入を、うまく検知できないらしい。。 お作法があるので、調べてみたとこの備忘録。 配列 // 追加: pushを使う let addItem = ... this.items.push(addItem); // 変更: spliceを使う let modifyIndex = 1; let modifyItem …
Nuxt.jsでSPAからSSRに変更しようとしたら、そのままでうまくいかず。。 import時にエラーが出てしまうのに対処したときの備忘録。 状況 使っていたのは、ScrollRevealというアニメーションライブラリ。 その中で、document.documentElementを参照しているの…
Nuxt.jsでGoogle Analyticsしたかったので、いろいろ調べたときの備忘録。 公式プラグインがあるらしい(Google Analytics Module) 中では、vue-analyticsを使っているので、基本vue-analyticsのドキュメントを見るっぽい。 インストール $ npm install --sav…
npm run buildしたときに、console.logとかをminify時に自動で削除してほしいと思ったときの備忘録。 Nuxt.jsのバージョンは、v2.2.0 nuxt.config.jsの設定 uglifyjs-webpack-pluginを使うようにした感じ。 const UglifyJsPlugin = require("uglifyjs-webpac…
