環境 Nuxt.js v2.x Vuejs v2.x VeeValidate v3 概要 Nuxt.js環境下でフォームを作成していたとき、入力値のバリデーションを簡単にしたかった。 今回はVeeValidateを使ってバリデーションをしてみる VeeValidate インストール、初期設定 いつものインストー…

環境 Vuejs 2系 やりたいこと たとえば <template v-for="count in [10, 100]"> <button :key="count" class="btn btn-outline-primary" :data-count="count" @click="setCount($event)"> {{ count }} </button> </template> みたいなコードがあったとして< button >タグの後ろに半角スペースを書きたい やり方 普通に「 」をしてもカットされてしまうので &nbsp; を使う

pages/debug.vue <template> <div id="app"> <button @click="setView('1')" v-bind:class="{active: currentView == 'page1'}"> １ </button> <button @click="setView('2')" v-bind:class="{active: currentView == 'page2'}"> ２ </button> <myComponent :is="currentView" /> </div> </template> <script> import page1 f…

やりたいこと あるコンポーネントを複数のVueファイルから呼ぶ。このとき、表示する文字を呼び出し元ごとに変えたい components/MyComponent.vue <template> <div> <h1>ここは親ページによってタイトルを変えたい</h1> </div> </template> <template> <div class="container"> <MyComponent> ここはcomponentsページです </MyComponent> </div> </template> <script> import MyComponent from …

環境 Nuxt.js 2.8 概要 vue2-hammerというhammer.jsを簡単にVue.js上で使えるようにできるhammer.jsのラッパーである。 が、Nuxt.jsで使うときにはVuejs単体と違って若干ハマったのでメモ インストール 兎にも角にもまずはvue2-hammerのインストールから npm…

結論 Vue.jsでページ内リンク（いわゆるアンカーリンク）を使いたいならvue-scrolltoを使ったほうが幸せになれる そもそもアンカーリンクって何 アンカーリンク自体死語な気がするが、いわゆるページ内リンク リンクをクリックすることで同じページ上の任意…

環境 Nuxt.js 2.8 背景 Nuxt.jsはVuejsを元に作られているので、CSSフレームワークを追加したいときは、「追加したいCSSフレームワーク vuejs」とかで検索すればインストール方法がすぐ出る。現に、bootstrap-vueとかvuetifyはそれ専用のライブラリが出てい…

自分にはNuxtJSは早すぎた（てきとう 以下のようなsrc/App.vue <template> <div> <h1>{{ msg }}</h1> </div> </template> <script> export default { data() { return { msg: 'nyaa', }; }, }; </script> これは今まで。これをstoreで管理できるように yarn add vuex でsrc/main.jsはデフォルトだと以下のようになってい…