はじめに 今回はNuxt.jsの勉強の一環として、適当なウェブページを作成したので、そのページをsurgeにデプロイした話についてまとめる。 完成ページ nuxt-example-page surgeとは 基本無料で使えるデプロイ先になります。(SSLの発行や多数のプロジェクトをア…

はじめに 今回は画像のスライド機能を作ってみた話についてまとめていく。 画像をスライドした 文字列のスライドを参考にした 色々調べてみたら文字列で実装している方がいたので、このコードを動かしてみることにしました。 JS Bin - Collaborative JavaScr…

はじめに 今回はボタンを押したら任意の場所までスクロールしてくれる機能をvue-scrolltoを用いて実装した話についてまとめていく。 環境設計 vue-scrolltoとは v-scroll-toディレクティブを拡張してくれるプラグインのことです。 公式ページ vue-scrollto -…

はじめに 今回はNuxt.jsの基礎勉強としてBootStrapをNuxt.jsに組み込んでみた話についてまとめる。 初期設定 create-nuxt-appコマンドでアプリを作成した時の質問にてBootStrapの使用について聞かれるのでBootStrapを選んで進める。 $ npx create-nuxt-app …

はじめに 今回はNuxt.jsの勉強としてESlintを用いたコードフォーマットチェックと自動調整を行なったことについてまとめる。 ESlintのインストール 開発ツール - NuxtJSの公式に沿ってESlintのみをインストールすることにした。 $ npm install --save-dev ba…

はじめに Nuxt.jsの基礎部分の勉強を一通り区切りがついたので今回も纏めてみました。 Vue.jsの基礎を学んでみて - KKZooの備忘録 参考にしたコンテンツやサイト 私が参考にしたサイトやコンテンツは基本的に以下の２つです。 Vue.jsの公式 Nuxt.jsの公式 Ud…

はじめに 今回は前回の記事の続きを記述していく。 page側でfirebaseにあるデータを取得して表示 idをキーに指定して、v-forを用いてtodosを展開することで表示することができる <ul> <li v-for="todo in todos" :key="todo.id"> <span v-if="todo.created"> (略) <span v-bind:class="{ done: todo.done }"> {{ todo.name }}, {{ todo.created.toDate() | dateFilter}} </span> (略) </span> </li></ul>…

はじめに 今回はグーグルが運営しているデータベースであるfirebaseとNuxt.jsのアプリケーションを連携させることを勉強した。 長くなると思うので記事を2つに分けて投稿します。 firebaseの環境設定 firebaseでプロジェクトを作成 firebaseでアカウント登録…

はじめに 今回はカウンターアプリを作ることでvuexの知識を整理をした。 github.com カウンターアプリの実装 storeの作成 モジュールモードを用いてストアを設計 stateにはデータの初期状態を記述 mutationsにデータの操作を記述 actionsにmutationの読み込…

はじめに 今回はvuexを用いたデータの扱いについて学習したので纏めておく。 前回同様に以下のリポジトリに扱ったソースコードを公開します。 github.com vuexとは vue.jsを用いたアプリケーションで扱うデータの状態管理を行うツールのことです。 Vuex とは…

はじめに 前回Nuxt.jsを勉強した際にはファイル構造や知識の追加だけだったので今回は実際に動かしてみたので行なったことについて纏めていく。 今回勉強した内容は以下のリポジトリにあげております。 github.com componentsとpageについて この二つがMVCの…

はじめに 今回はVue.jsのステップアップとしてNuxt.jsの勉強を行なったので、それについてまとめていこうと思う。 npmのinstall npmが入ってなかったのでnpmの環境設定をした。(詳しくは以下の記事に記載しました) - npxコマンドを使うためにNode.jsをインス…