投稿日：2020-01-20T23:46:50+09:00

Vue.js(Vuex) で mapActions に別名（エイリアス）を付けて扱う

例

update/index.js に定義されているupdateというアクションを、

このインスタンスの中では this.updateAction とCallできる。

エイリアスは同名でも、問題なし。

名前が衝突すると、無限ループになったりするので、そういう時に使った。
import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions("update", {
      updateAction: "update",
      clearForms: "clearForms"
    }),
  }
}

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-20T23:35:34+09:00

Vue.jsコンポーネント内でLaravelの .envを使用する方法

これまで

axiosインスタンスの作成（カスタム設定）をしたいときのbaseURLの記述部分で直接記述しても良いのか？という疑問に当たりました。

また、本番環境・開発環境などとこれから設定値も切り替えたいものでもありました。
let $axios = axios.create({
    baseURL: 'http://localhost:8000',
    timeout: 5000,
    headers: {
        'Content-Type': 'application/json'
    }
})
対処

process.env.[変数名]でアクセスできる.

Laravel環境変数
let $axios = axios.create({
    baseURL: process.env.MIX_BASE_URL,
    timeout: 5000,
    headers: {
        'Content-Type': 'application/json'
    }
})
env
MIX_BASE_URL=http://localhost:8000
所存

環境で変化するものはenvに入れてみようかなと思います（仮）

参考

https://medium.com/@patrickcurl/using-laravel-env-variables-inside-vue-js-components-29faa9a344c5

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-20T22:03:59+09:00

NuxtのasyncDataとdataの使い分け方

NuxtにはasyncDataがあります。Vueはdataのみが使えますが、NuxtはasyncDataとdataどちらも使えます。

では、asyncDataとdataはNuxtでどう使い分ければ良いのか？

これが疑問でしたので、asyncDataとdataの違いについて調査してみました。結論から言うと、私はasyncDataのみを使い、mountedでwindowやdocumentにアクセスする方針に決めました。

なおfetchはasyncDataと似た挙動をしますが、コンポーネントに値をセットすることはできません。fetchはVuexに値をセットする目的で使用されます。

以下は私の調査結果と、考察になります。間違いがあればご指摘をお願いいたします。

asyncDataとdataのに違いについて調査してみた

async/awaitについて調査

まずはなぜasyncDataが必要なのかを調べるために、dataをasync functionにして非同期処理を含めてみました。
すると、dataが実行されていることは確認できましたが、コンポーネントに値がセットされていませんでした。

dataはawaitなしで実行され、asyncDataはawaitつきで実行されているようです。
今回のケースでは、dataはPeomiseを返していたため、コンポーネントに値がセットされていなかったということです。

SSR時の実行順序について調査

サーバーでasyncDataの呼び出し→
サーバーでdataの呼び出し→
クライアントでdataの呼び出し

となりました。クライアントでasyncDataは実行されないので、windowやdocumentにアクセスできるのはdataだけとなります。(サーバーでアクセスしないように、process.clientがtrueかチェックする必要あり)
SSRする初回アクセス時に、windowやdocumentにアクセスできるのがdataの唯一のメリットといえそうです。

SPAページ遷移時の実行順序について

クライアントでasyncDataの呼び出し→
クライアントでdataの呼び出し

となりました。

それぞれがreturnしたオブジェクトの上書きについて

コンポーネントへ値をセットすることに関しては、asyncDataの値が優先されます。
ややこしいことにdataの方が後に実行されるのですが、同じプロパティについてはasyncDataの値が優先されます。

結論

asyncDataだけで良さそうです。繰り返しになりますが私はasyncDataのみを使い、mountedでwindowやdocumentにアクセスする方針に決めました。

好みの問題ですが、非同期処理のみをasyncDataに書いて、それ以外をdataにするセマンティックを重視した方針もあるかと思います。

asyncDataとdataうまく使い分けたところで、ページの表示が大幅に速くなることはなさそうです。

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-20T20:49:50+09:00

Vue.js CSSプロパティを要素に付与する方法

この記事は初心者向け Vue.jsで複数のclassを付与する方法について記述した自分用メモになります。
誤っている点がありましたらご指摘をお願いいたします。

この記事は以下の方向けの記事となっております。

推定読者：
・v-bindの使い方は分かるが複数のclassを要素に付与する方法が分からない方

CSSプロパティを付与する方法は２つある

複数のプロパティを付与する方法には以下の２つがあります。

・要素に直接複数のプロパティを指定して付与する
・予めvue側で用意したオブジェクト型を用いて付与する（推奨）

要素に直接複数のプロパティを指定して付与する

以下、基本的な書き方
<p :class={クラス名: true(もしくはfalse), クラス名: true(もしくはfalse)}
「trueもしくはfalse」は、「指定したクラスを付与する（true）かしない(false)か」を指定しています。
実際にこのやり方で記述した例が以下になります。
<h4 :class="{ textcolor: false, 'bg-color': true}">テキストカラーが赤(falseなので適用されない)、背景カラーがスカイブルー（trueなので適用）</h4>
.textcolor {
    color: red;
}
.bg-color {
    background-color: skyblue;
}
実行結果

また上記の方法はtrue falseでクラスを付与したり外したりする事を可能としています。
もし取り外す必要がない場合や同じプロパティで別のものを指定したい場合などは以下の方法もあります。

以下、基本的な書き方
<p :style="{セレクタ名: 変数名, セレクタ名: 変数名}"></p>

<script>
new Vue({
    el: '#app',
    data: {
       変数名: '具体的な値',
       変数名: '具体的な値',
 }
})
</script>
上記の例では{プロパティ名：変数名}としていますが、直接具体的な値を直接記述することもできます。（例：{color: 'red'}）
実際にこのやり方で記述した例が以下になります。
<h4 :style="{color: textColor, 'background-color': bgColor}">テキストカラーが赤、背景カラーがスカイブルー</h4>

<script>
new Vue({
    el: '#app',
    data: {
       textColor: 'red',
       bgColor: 'skyblue',
 }
})
</script>
実行結果

予めvue側で用意したオブジェクト型を用いて付与する（推奨）

以下、基本的な書き方
<h1 :class="classObj"></h1>

new Vue({
    el: '#app',
computed: {
   classObj() {
     return { textcolor: true, 'bg-color': true}
     }
  }
})
.textcolor {
    textcolor: red;
}
.bg-color {
    background-color: skyblue;
}
実行結果

おまけ Object型を二つ付与する方法

以下、基本的な書き方
<p :style="[オブジェクト名, オブジェクト名]"></p>
<script>
  new Vue({
     el: '#app',
     data: {
        オブジェクト名: {
            セレクタ名: '指定する値', 
            セレクタ名: '指定する値'
       },
        オブジェクト名: {
            セレクタ名: '指定する値'
      }
    }
})
</script>    
実際にこのやり方で記述した例が以下になります。
<h4 :style="[styleObj, pxObj]">Object型を二つ付与する</h4>

<script>
  new Vue({
     el: '#app',
     data: {
        styleObj: {
            color: 'red', 
            'background-color': 'skyblue'
       },
        pxObj: {
            fontSize: '100px'
      }
    }
})
</script>    
実行結果

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-20T19:03:31+09:00

?Nuxt.js とFirebaseを使ってログイン機能を実装する。その１

Qiita初投稿です。

Nuxt.jsに触れる機会があったので、備忘録として投稿させてもらいます。

Nuxt.jsとは

Nuxt.jsとは、Vue.jsのフレームワークの１つです。

主な特徴として、

Vue-router　:　アプリケーション内のページ遷移（ルーティング）を管理するパッケージ

vuex　:　アプリケーション内のデータや状態の管理を行うパッケージ

などが挙げられます。

この他にも、デフォルトでSSRが行えたりと初心者にもわかりやすく非常に便利です。
SSRとは、要は
「従来のクライアント・サーバー間の処理の大部分をサーバーが担ってくれるため、処理が非常に早くなる仕組み」
程度で考えてもらっていいと思います。

ちなみに、SSRなどの概念はこの記事が非常にわかりやすかったです。

Nuxtアプリケーションの生成

では早速、Nuxtフォルダの実装を行っていきます。

yarnのインストールが出来ていなければまず最初にこのコマンドを行なってください。
sudo npm install -g yarn  
yarnが既に入っている人は、Nuxtアプリケーションを生成しましょう。
yarn create nuxt-app 生成フォルダ名
　
　
コマンドを実行すると、めちゃくちゃ質問されます。

アプリケーションの名前
? Project name (QiitaExample) 
基本的にはそのままEnterでいいです。

アプリケーションの説明
? Project description (My exquisite Nuxt.js project) 
基本的にはそのままEnterでいいです。

作者の名前
? Author name (Your name) 
ここも基本的にはそのままEnterでいいです。

パッケージマネージャーの選択
? Choose the package manager (Use arrow keys)
❯ Yarn 
  Npm 
パッケージマネージャーににnpmかyarnのどちらを使うかを選べます。

UIフレームワークの選択
? Choose UI framework (Use arrow keys)
❯ None 
  Ant Design Vue 
  Bootstrap Vue 
  Buefy 
  Bulma 
  Element 
  Framevuerk 
  iView 
  Tachyons 
  Tailwind CSS 
  Vuetify.js 
UIフレームワークに何を使うかです。(今回は、Vuetify.jsを使っていこうと思います。)

サーバーサイドのフレームワークの選択
? Choose custom server framework (Use arrow keys)
❯ None (Recommended) 
  AdonisJs 
  Express 
  Fastify 
  Feathers 
  hapi 
  Koa 
  Micro 
サーバーサイドのフレームワークです。
TypeScriptなどを使う際はExpressが良いと思いますが、今回はNoneで以下行きます。

Nuxtモジュールの選択
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to inv
ert selection)
❯◯ Axios
 ◯ Progressive Web App (PWA) Support
 ◯ DotEnv
今回はfirebaseでサーバーと結びつけるためDotEnvを選択します。
（後々紹介しますが、DotEnvはサーバー情報を隠してくれるツールです。）

コードフォーマッターの選択
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to inver
t selection)
❯◯ ESLint
 ◯ Prettier
 ◯ Lint staged files
 ◯ StyleLint
あまりよろしくないコードや、ルールに則ってコード整形してくれるツールです。
今回は何も選択しません。

テストフレームワークの選択
? Choose test framework (Use arrow keys)
❯ None 
  Jest 
  AVA 
これは正直違いがわかりません。（笑）
なので、今回はNoneにします。
（詳しい方は教えてくださると助かります。）

レンダリング方法
? Choose rendering mode (Use arrow keys)
❯ Universal (SSR) 
  Single Page App 
冒頭で述べたSSRかSPAの選択が出来ます。
今回はSSRを選択します。
（SSR・SPAの概念がわからない人はこの記事がおすすめです。）

デベロップメントツールの選択
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to i
nvert selection)
❯◯ jsconfig.json (Recommended for VS Code)
Visual Studioを使う際は入れておいたほうがいいかもです。
僕はAtomを使うので、選択をしていません。
?  Successfully created project QiitaExample

  To get started:

    cd QiitaExample
    npm run dev

  To build & start for production:

    cd QiitaExample
    npm run build
    npm run start

✨  Done in 2160.69s.
この画面が表示されたら無事に初期設定が終了です！

Nuxtの実行

では早速起動してみましょう。
　
自分が作った、フォルダに移動します。
cd 生成フォルダ名
その後npm run devで実行出来ます。
npm run dev
~:QiitaExample yourname$ npm run dev

> QiitaExample@1.0.0 dev /~/QiitaExample
> nuxt


   ╭─────────────────────────────────────────────╮
   │                                             │
   │   Nuxt.js v2.11.0                           │
   │   Running in development mode (universal)   │
   │                                             │
   │   Listening on: http://localhost:3000/      │
   │                                             │
   ╰─────────────────────────────────────────────╯

ℹ Preparing project for development                                   17:38:51
ℹ Initial build may take a while                                      17:38:51
✔ Builder initialized                                                 17:38:51
✔ Nuxt files generated                                                17:38:51

✔ Client
  Compiled successfully in 6.37s

✔ Server
  Compiled successfully in 5.58s

ℹ Waiting for file changes                                            17:38:59
ℹ Memory usage: 322 MB (RSS: 463 MB)                                  17:38:59
この画面が表示されれば、無事に実行出来ています。
実行中は、http://localhost:3000/ に編集中の画面が表示されます。
では、http://localhost:3000/ を確認してみましょう。

こんな感じになるはずです。

Nuxtのディレクトリ構造

では早速生成した、実行フォルダの中身をみていきましょう。

assets

主に画像データなどを記述するフォルダになります。
こちらは、webpackモジュールとして扱うことができます。
webpackモジュールは、「画像データをURLとして扱えるようになるため非常に処理が早くなるもの」という認識で大丈夫だと思います。
ただし、データサイズの大きなものを扱ってしまうとかえって処理が遅くなるので、細々したものがベストです。

components

頻繁に使うロゴや、ヘッダー、フッターなどを記述します。
ここに雛形を作っておくとアプリケーション内のpages、layoutsで簡単に呼び出すことができます。

layouts

アプリケーションの大まかな外観を決めることができます。
また基本的に/layouts/default.vueから、pagesを表示させていくという動き方になります。
呼び出し方は、下のように<nuxt />で呼び出せます。
また、「不明なページに遷移した」などのエラー時にはlayouts/error.vueが呼び出されます。
/layouts/default.vue
<template>
  <nuxt/>
</template>
middlware

この記事に良い画像があったので使わせてもらいます。

このように、pagesやlayoutsがレンダリング（ページが生成）される度に、その前に呼び出せれる処理を記述するディレクトリになります。
ここに、リダイレクト処理などを記述すると綺麗に機能します。

pages

メインで記述していく部分になります。
layoutsに表示してもらうページをここに記述します。
また冒頭で述べた通り、Vue-routerが標準装備されているため、特にルーティングなどは気にしなくても大丈夫です。

plugins

外部モジュールなどを詳しく記述することができます。
今回はfirebaseの情報ををここに記述します。
ただし、使う際は、nuxt.config.jsのmodulesにも記述する必要があります。

static

assetsと同じように、画像データを記述するフォルダです。
こちらはwebpackモジュールとしては扱わないので、assetで扱わないような大きなデータサイズのものなどをメインに記述していきます。

store

アプリケーション内のデータや情報の保持・操作を行うフォルダです。
標準装備されているVuexの領域でもあります。
今回はログイン状態やパスワードなどを記述していきます。

nuxt.config.js

このファイルにこのアプリケーションの内容をざっくり記述していきます。
またこのファイルをいじると、npm run devが止まるもしくは不具合がでるので、ここをいじったあとはもう一度ビルドをした方がいいです。

まとめ

今回はざっくばらんにNuxt.jsについて説明させてもらいました。
次回から、具体的な記述の仕方を書いていこうと思います。

また、間違えている点があれば是非教えてください！！

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-20T19:03:31+09:00

?【初心者】Nuxt.js とFirebaseを使ってログイン機能を実装する。その１

Qiita初投稿です。

Nuxt.jsに触れる機会があったので、備忘録として投稿させてもらいます。

Nuxt.jsとは

Nuxt.jsとは、Vue.jsのフレームワークの１つです。

主な特徴として、

Vue-router　:　アプリケーション内のページ遷移（ルーティング）を管理するパッケージ

vuex　:　アプリケーション内のデータや状態の管理を行うパッケージ

などが挙げられます。

この他にも、デフォルトでSSRが行えたりと初心者にもわかりやすく非常に便利です。
SSRとは、要は
「従来のクライアント・サーバー間の処理の大部分をサーバーが担ってくれるため、処理が非常に早くなる仕組み」
程度で考えてもらっていいと思います。

ちなみに、SSRなどの概念はこの記事が非常にわかりやすかったです。

Nuxtアプリケーションの生成

では早速、Nuxtフォルダの実装を行っていきます。

yarnのインストールが出来ていなければまず最初にこのコマンドを行なってください。
sudo npm install -g yarn  
yarnが既に入っている人は、Nuxtアプリケーションを生成しましょう。
yarn create nuxt-app 生成フォルダ名
　
　
コマンドを実行すると、めちゃくちゃ質問されます。

アプリケーションの名前
? Project name (QiitaExample) 
基本的にはそのままEnterでいいです。

アプリケーションの説明
? Project description (My exquisite Nuxt.js project) 
基本的にはそのままEnterでいいです。

作者の名前
? Author name (Your name) 
ここも基本的にはそのままEnterでいいです。

パッケージマネージャーの選択
? Choose the package manager (Use arrow keys)
❯ Yarn 
  Npm 
パッケージマネージャーににnpmかyarnのどちらを使うかを選べます。

UIフレームワークの選択
? Choose UI framework (Use arrow keys)
❯ None 
  Ant Design Vue 
  Bootstrap Vue 
  Buefy 
  Bulma 
  Element 
  Framevuerk 
  iView 
  Tachyons 
  Tailwind CSS 
  Vuetify.js 
UIフレームワークに何を使うかです。(今回は、Vuetify.jsを使っていこうと思います。)

サーバーサイドのフレームワークの選択
? Choose custom server framework (Use arrow keys)
❯ None (Recommended) 
  AdonisJs 
  Express 
  Fastify 
  Feathers 
  hapi 
  Koa 
  Micro 
サーバーサイドのフレームワークです。
TypeScriptなどを使う際はExpressが良いと思いますが、今回はNoneで以下行きます。

Nuxtモジュールの選択
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to inv
ert selection)
❯◯ Axios
 ◯ Progressive Web App (PWA) Support
 ◯ DotEnv
今回はfirebaseでサーバーと結びつけるためDotEnvを選択します。
（後々紹介しますが、DotEnvはサーバー情報を隠してくれるツールです。）

コードフォーマッターの選択
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to inver
t selection)
❯◯ ESLint
 ◯ Prettier
 ◯ Lint staged files
 ◯ StyleLint
あまりよろしくないコードや、ルールに則ってコード整形してくれるツールです。
今回は何も選択しません。

テストフレームワークの選択
? Choose test framework (Use arrow keys)
❯ None 
  Jest 
  AVA 
これは正直違いがわかりません。（笑）
なので、今回はNoneにします。
（詳しい方は教えてくださると助かります。）

レンダリング方法
? Choose rendering mode (Use arrow keys)
❯ Universal (SSR) 
  Single Page App 
冒頭で述べたSSRかSPAの選択が出来ます。
今回はSSRを選択します。
（SSR・SPAの概念がわからない人はこの記事がおすすめです。）

デベロップメントツールの選択
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to i
nvert selection)
❯◯ jsconfig.json (Recommended for VS Code)
Visual Studioを使う際は入れておいたほうがいいかもです。
僕はAtomを使うので、選択をしていません。
?  Successfully created project QiitaExample

  To get started:

    cd QiitaExample
    npm run dev

  To build & start for production:

    cd QiitaExample
    npm run build
    npm run start

✨  Done in 2160.69s.
この画面が表示されたら無事に初期設定が終了です！

Nuxtの実行

では早速起動してみましょう。
　
自分が作った、フォルダに移動します。
cd 生成フォルダ名
その後npm run devで実行出来ます。
npm run dev
~:QiitaExample yourname$ npm run dev

> QiitaExample@1.0.0 dev /~/QiitaExample
> nuxt


   ╭─────────────────────────────────────────────╮
   │                                             │
   │   Nuxt.js v2.11.0                           │
   │   Running in development mode (universal)   │
   │                                             │
   │   Listening on: http://localhost:3000/      │
   │                                             │
   ╰─────────────────────────────────────────────╯

ℹ Preparing project for development                                   17:38:51
ℹ Initial build may take a while                                      17:38:51
✔ Builder initialized                                                 17:38:51
✔ Nuxt files generated                                                17:38:51

✔ Client
  Compiled successfully in 6.37s

✔ Server
  Compiled successfully in 5.58s

ℹ Waiting for file changes                                            17:38:59
ℹ Memory usage: 322 MB (RSS: 463 MB)                                  17:38:59
この画面が表示されれば、無事に実行出来ています。
実行中は、http://localhost:3000/ に編集中の画面が表示されます。
では、http://localhost:3000/ を確認してみましょう。

こんな感じになるはずです。

Nuxtのディレクトリ構造

では早速生成した、実行フォルダの中身をみていきましょう。

assets

主に画像データなどを記述するフォルダになります。
こちらは、webpackモジュールとして扱うことができます。
webpackモジュールは、「画像データをURLとして扱えるようになるため非常に処理が早くなるもの」という認識で大丈夫だと思います。
ただし、データサイズの大きなものを扱ってしまうとかえって処理が遅くなるので、細々したものがベストです。

components

頻繁に使うロゴや、ヘッダー、フッターなどを記述します。
ここに雛形を作っておくとアプリケーション内のpages、layoutsで簡単に呼び出すことができます。

layouts

アプリケーションの大まかな外観を決めることができます。
また基本的に/layouts/default.vueから、pagesを表示させていくという動き方になります。
呼び出し方は、下のように<nuxt />で呼び出せます。
また、「不明なページに遷移した」などのエラー時にはlayouts/error.vueが呼び出されます。
/layouts/default.vue
<template>
  <nuxt/>
</template>
middlware

この記事に良い画像があったので使わせてもらいます。

このように、pagesやlayoutsがレンダリング（ページが生成）される度に、その前に呼び出せれる処理を記述するディレクトリになります。
ここに、リダイレクト処理などを記述すると綺麗に機能します。

pages

メインで記述していく部分になります。
layoutsに表示してもらうページをここに記述します。
また冒頭で述べた通り、Vue-routerが標準装備されているため、特にルーティングなどは気にしなくても大丈夫です。

plugins

外部モジュールなどを詳しく記述することができます。
今回はfirebaseの情報ををここに記述します。
ただし、使う際は、nuxt.config.jsのmodulesにも記述する必要があります。

static

assetsと同じように、画像データを記述するフォルダです。
こちらはwebpackモジュールとしては扱わないので、assetで扱わないような大きなデータサイズのものなどをメインに記述していきます。

store

アプリケーション内のデータや情報の保持・操作を行うフォルダです。
標準装備されているVuexの領域でもあります。
今回はログイン状態やパスワードなどを記述していきます。

nuxt.config.js

このファイルにこのアプリケーションの内容をざっくり記述していきます。
またこのファイルをいじると、npm run devが止まるもしくは不具合がでるので、ここをいじったあとはもう一度ビルドをした方がいいです。

まとめ

今回はざっくばらんにNuxt.jsについて説明させてもらいました。
次回から、具体的な記述の仕方を書いていこうと思います。

また、間違えている点があれば是非教えてください！！

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-20T18:27:05+09:00

Vue.js/Nuxt.js: 「img要素の高さ」に「img要素上のdiv要素の高さ」を合わせる

はじめに

img要素の上にdiv要素を重ねる際の高さ合わせに時間を溶かしたので、打開策の一つを紹介します。
特定の言語・フレームワークに限った話ではないですが、今回はVue.js, Nuxt.jsで実装しました。

つまり何がしたいの？

Gif

イメージ

div要素（赤色）の高さをimg要素（青色）の高さに合わせます。
ウィンドウサイズが変わっても追従するイメージです。

コード
<template>
  <div :style="{height:wrapperHeight}" class="wrapper">
    <img id="background-image" ref="background-image" src="./../assets/picture.png">
    <div class="flex-left" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      timer: 0,
      wrapperHeight: '0px'
    }
  },
  mounted () {
    this.handleResize()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize () {
      const e = this.$refs['background-image']
      this.wrapperHeight = e.offsetHeight + 'px'
      if (this.timer > 0) { clearTimeout(this.timer) }
      this.timer = setTimeout(() => {
        const e = this.$refs['background-image']
        this.wrapperHeight = e.offsetHeight + 'px'
      }, 200)
    }
  }
}
</script>

<style scoped>
.wrapper{
  display: flex;
}
.flex-left{
  width:40%;
  background: #FF000099;
}
#background-image{
  z-index: -1;
  width:100%;
  position: absolute;
}
</style>
意識したこと

Vue.jsのライフサイクルダイアグラム

mounted() や beforeDestroy() の実行順序

もっと良い方法あるぞ！って方は是非コメントなどで教えて下さい！

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-20T18:27:05+09:00

Vue.js / Nuxt.js: 「img要素の高さ」に「img要素上のdiv要素の高さ」を合わせる

はじめに

img要素の上にdiv要素を重ねる際の高さ合わせに時間を溶かしたので、打開策の一つを紹介します。
特定の言語・フレームワークに限った話ではないですが、今回はVue.js, Nuxt.jsで実装しました。

つまり何がしたいの？

Gif

イメージ

div要素（赤色）の高さをimg要素（青色）の高さに合わせます。
ウィンドウサイズが変わっても追従するイメージです。

コード
<template>
  <div :style="{height:wrapperHeight}" class="wrapper">
    <img id="background-image" ref="background-image" src="./../assets/picture.png">
    <div class="flex-left" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      timer: 0,
      wrapperHeight: '0px'
    }
  },
  mounted () {
    this.handleResize()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize () {
      const e = this.$refs['background-image']
      this.wrapperHeight = e.offsetHeight + 'px'
      if (this.timer > 0) { clearTimeout(this.timer) }
      this.timer = setTimeout(() => {
        const e = this.$refs['background-image']
        this.wrapperHeight = e.offsetHeight + 'px'
      }, 200)
    }
  }
}
</script>

<style scoped>
.wrapper{
  display: flex;
}
.flex-left{
  width:40%;
  background: #FF000099;
}
#background-image{
  z-index: -1;
  width:100%;
  position: absolute;
}
</style>
意識したこと

Vue.jsのライフサイクルダイアグラム

mounted() や beforeDestroy() の実行順序

もっと良い方法あるぞ！って方は是非コメントなどで教えて下さい！

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-20T17:47:22+09:00

Vue.jsのScrollBehaviorがCSSのせいで動かなかった時のこと

Vue.jsでScrollBehaviorが動かなかった時のメモ。

以下,Vue Routerの設定ファイルに記したscrollBehaviorメソッド
scrollBehavior(to, from, savedPosition) { 
  return { 
    x: 0, 
    y: 0
  } 
}, 
ページ遷移と同時にページの一番上まで戻ることを期待していたのですが、
時々うまく動作せず、ページの一番上では無い、ページの途中の変なところに移動してしまうことがありました。

Webページを限界以上にスクロールして、空白の部分が見えてしまうの(バウンススクロール)が嫌で
bodyタグに対して、ページの高さの中でのみスクロールが効くようにCSSで設定をかけていたのですが、
これが原因のようでした。

解決策

bodyタグではなく、htmlタグに対してCSSを適用するように修正すると、ScrollBehaviorが正しく動作するようになりました。
body{
  overflow-x: scroll;
  overscroll-behavior-y: none; 
  overscroll-behavior-x: none;
}
↓
html{
  overflow-x: scroll;
  overscroll-behavior-y: none; 
  overscroll-behavior-x: none;
}
原因

原因はbodyタグにかかる「overflow-x」でした。

なので、CSSの適用先をbodyタグではなくhtmlタグにするか、

bodyタグの「overflow-x」をコメントアウトすることで、scrollBehaviorを正常に動作させることもできました。（この場合バウンススクロールは制御できない）

↓Qiitaの緑のヘッダーの上の白い部分が見えないようにしたかった

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-20T16:31:52+09:00

【Sentry】Vue.js まとめ

1. Setup

entry.js

Sentry.init({
  dsn: process.env.SENTRY_DSN,
  integrations: [new Integrations.Vue({ Vue, attachProps: true })]
})

2. Set user info

auth.js

const user = data.user
Sentry.configureScope(scope => {
  scope.setUser({
    id: user.staff_id,
    username: user.account,
    email: user.email_account
  })
})

3. Catch api error

action.js

try {
  dispatch('get api')
} catch (error) {
  Sentry.captureException(error)
}

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-20T16:05:54+09:00

Vue CLIのパッケージマネージャーがnpmからyarnに変わっていて苦労した

こんにちは、てりーです。（Twitter:@teriteriteriri）

昨日、Vue CLIで新しいプロジェクトを作ろうとしてたら、予想以上に苦労しました。
結論から言うとnpmからyarnにしとこうね！！って話だったんですが、
Vue CLI4でvue createが上手くいかない！！って人は参考になるかもしれないので、詳しくまとめておきます。

Vue CLIでプロジェクトを作る！！

まず、Vue CLIをインストール
npm install -g @vue/cli
続いてVue cli-service-globalのインストール
npm install -g @vue/cli-service-global
これで、Vue CLIを動かす準備OK！！
プロジェクトを作っていきます。
vue create hoge
すると、以下のエラー文が出てプロジェクトを作れません！！
Error: spawn yarn ENOENT
？？？

spawn yarn ENOENT的な物は見た事ないし、ググってみても日本語の文献が少なすぎて全く意味がわからない！！

Error: spawn yarn ENOENTはなぜ？？

Vue CLIのインストールの段階で、Warningにcore.js3より前のものがVueCLIに含まれてるけど、良くないよー！！的なものはあったけど、これはVueCLI側がまだフォローできていない所っぽいので、今回は無視！！

nodeやnpmのバージョンを最新にupdateしてもエラーは消えないので、依存関係は原因ではなさそう。

yarnがなんか怪しそう！！

エラーコードにあったyarnを調べてみるとこんな記述が

Yarnはnpmに代わるパッケージマネージャーとして発表された後発のパッケージマネージャーで、npmが抱えていた多くの改善点を改善したパッケージマネージャーです。

yarn知らんかった！こんなものがあったのか。
Vue CLIの設定(~/.vuerc)を調べてみると、、、
{
  "useTaobaoRegistry": false,
  "packageManager": "yarn"
}
パッケージマネージャーのデフォルトがyarnに設定されていました！！
yarnじゃなくてnpmを使ってたからうまくいかなかったんですね。

デフォルトがyarnなので、本当はyarnをインストールして進めていくのが良いのですが、今回は設定をnpmに変えて進めていくことにしました。
 "useTaobaoRegistry": false,
  "packageManager": "npm"
で、もう一回vue create hogeしたら上手く行きました！！！

めでたしめでたし。

時間見つけてnpmからyarnに切り替えよう。

参考：https://s8a.jp/vue-cli-use-npm

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-20T12:01:27+09:00

Auth０で簡単にユーザー認証を実装（花粉カレンダー作成②）

概要

耳鼻咽喉科の開業医をしています。
花粉症の患者さんに使ってもらえるような花粉飛散情報が分かるカレンダーアプリを作りたいと思っています。
前回カレンダーを表示して予定を入れるところまで挑戦してみました。
Vue.js×FullCallendarでカレンダー作成（花粉カレンダー作成①）

今回はユーザー個別のカレンダーを表示するために、ユーザー認証機能の実装に挑戦しました。

完成動画

https://youtu.be/koMpYAiKE2k

作成

こちらの記事を参考にさせていただきました。ありがとうございました。
Auth0 + GitHub Pagesでミニマムなログインサンプルを作る
 ファイル一つコピペで試すAuth0+Vue.jsのログインサンプル

1. Auth0のアカウント作成・サインイン
こちらから行ってください。
Auth0ホームページ

2.アプリケーションの作成
[Applications]>[Settings]のタブに移動し、
Allowed Callback URLs、Allowed Logout URLsを以下に設定します。
http://localhost:8080/#/calendar
Allowed Web Origins、Allowed Origins (CORS)を以下に設定します。
http://localhost:8080
DomainとClient IDは後で使うのでひかえておきます。

3.ユーザー認証の実装
以前作成したCalendar.vueに書き込んでいきます。
Vue.js×FullCallendarでWEBカレンダー作成（花粉カレンダー作成①）

templateタグの中に以下を追加していきます。
<button id="btn-login" v-on:click="auth0login()">Log in</button>
        <button id="btn-logout" v-on:click="auth0logout()">Log out</button>

        <div v-if="login" id="gated-content">
          <p>
            You're seeing this content because you're currently
          </p>
          <label>
              User profile Image:
              <img :src="userData.picture" id="ipt-user-profile-image" width="200px">
              <br />
          </label>
          <label>
            User profile:
            <pre id="ipt-user-profile">{{userData}}</pre>
          </label>

          <label>
            Access token: 
            <pre id="ipt-access-token">{{userData.token}}</pre> 
          </label>      
        </div>
ログイン後にカレンダーが表示されるようにします。
 <div v-if="login">
        <FullCalendar 
    default-view="dayGridMonth"
    :locale="locale"
    :header="calendarHeader"
    :weekends="calendarWeekends"
    :plugins="calendarPlugins"
    :events="calendarEvents"
    @dateClick="handleDateClick"
  />
  </div>
scriptタグの内に以下を書き込んでいきます。
import createAuth0Client from '@auth0/auth0-spa-js';
data(){ }の中に以下を追記します。
data() {
    return {
      auth0:{},
      APP_PATH:'/#/calendar',
      userData:{},
      login:false,
    }
}
methods: { }の中に以下を追記します。
async updateUI(){
        const isAuthenticated = await this.auth0.isAuthenticated();
        if (isAuthenticated) {
            this.login = true; //ログイン後の情報が表示
            this.userData = await this.auth0.getUser();
            this.userData.token = await this.auth0.getTokenSilently();
        }
    },
    async auth0login(){
        await this.auth0.loginWithRedirect({
            redirect_uri: window.location.origin + this.APP_PATH
        });
    },
    auth0logout(){
        this.auth0.logout({
            returnTo: window.location.origin + this.APP_PATH
        });
    },
最後にこちらを追記して完了です。
async created() {
    this.auth0 = await createAuth0Client({
      domain: 'domain名を記載',
      client_id: 'client_idを記載',
      // redirect_uri: '<MY_CALLBACK_URL>'
    });
    this.updateUI();
    const isAuthenticated = await this.auth0.isAuthenticated();    
    if (isAuthenticated) {
        return;
    }
    const query = window.location.search;
    if (query.includes("code=") && query.includes("state=")) {

        // Process the login state
        await this.auth0.handleRedirectCallback();

        this.updateUI();

        // Use replaceState to redirect the user away and remove the querystring parameters
        window.history.replaceState({}, document.title, this.APP_PATH);
    }
}
Auth0でユーザー認証を入れたいところをONにします。

考察
最初は参考記事のコピペで出来るかな？と軽く考えていました。しかし、vue.jsを全く勉強していなかったのですこし時間がかかってしまいました。追記する場所が分かればこれだけで面倒なユーザー認証が実装できるので便利ですね。

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-20T11:55:05+09:00

【Nuxt】ページとコンポーネントの関係と管理について

nuxtを書いていって、ある程度まとまったのでメモとして。

結論

ページ → コンポーネント間のデータの受け渡しはvuexのstateを用いる。

propsでも渡せるがコンポーネント内でコンポーネントを更に読み込むケースもあるため、バケツリレーになってしまう。

コンポーネントはvuexのstateを参照する。コンポーネント内でデータをfetchしない。

読み込み順の制御はページで行う。

基本

ページ

/page配下

ページ全体の表示に必要なHTML・CSS・JSが入っている

コンポーネントを読み込むこともできる

コンポーネント

/components配下

ページ上で使うパーツファイル

そのコンポーネントを表示するために必要なHTML、CSS、JSのみが格納されている

コンポーネント内で更にコンポーネントを読み込むことも可能

ページからコンポーネントへのデータの受け渡し

2パターンある。

vuexのstateを使う

propsを使う

単純なのは2だが、propsの定義が必要・バケツリレーが発生するため基本的に1の形式に統一したい。
（のだが適切に使い分けるべき。後述）

コンポーネント内でAPIコールをしない理由

コンポーネント間の読み込み順の制御ができない

認証を通った上で読み込みが必要な場合にその順番の制御ができない

なので、コンポーネントはあくまでも渡されたデータ、stateで管理されたデータの表示のみを行うべき。
APIコールの処理はページで行い、順番を適切に制御する。

破綻するケース

全部storeに寄せすぎるとstoreの肥大化を招いて破綻する。

storeは結局グローバル変数と変わりない。

保持する必要の無いデータはstoreを使わずpropsで適切に使ったほうが良い

パフォーマンス的にもデータ管理的にも。

制約がない故に

その気になれば、コンポーネント側でデータを取り寄せ、ページ側ではstateを使う、といったスタイルに統一することも出来るし、
コンポーネント側でデータをロードすることもあれば、ページ側で行ったり、バラバラにすることもできる。
いくらでもできる。

なので、基本を決めておいて、「例外的にここではこうしている」といったコメントを残した上でコードを書いていくと、
メンテナンスの際にコードが追いやすり、変更もしやすくなると思った。

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-20T10:13:29+09:00

Vue CLI 3のプロジェクトでBootstrap4を使ってみた

はじめに

はじめまして、Qiita初投稿です。
最近Vueを勉強し始め、Bootstrapと組み合わせてポートフォリオ作ろうと思い調べていたのですが、vue-cliの3.0系に対応した連携方法の情報がなかなか見つからなかったのでメモがてら記録しておきます。

Vue.js を vue-cli を使ってシンプルにはじめてみる
 Vue.js + Bootstrap4でポートフォリオサイトの雛形を作ろう！

プロジェクト作成

Vue vue-cliの3.0系をつかって作成しました。
$ vue create my-project
vue-cliの3.0系を使う場合、公式の推奨はvue createとのこと（下記参照）
vue init と vue createの違い

Bootstrap4を導入

2.0系ではsrc/router/index.jsというファイルがあったそうですが、上記方法で作ったプロフェクトには該当するものが見当たらなかったため、若干困りました。
そこで、/src/main.jsにbootstrapの記述を追記。追記内容は公式リファレンス参照
https://bootstrap-vue.js.org/docs

↓ファイルはこんな感じになりました
/src/main.js
import Vue from 'vue'
import App from './App.vue'
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')
確認

とりあえずbootstrapのボタンを追加
/src/App.vue
<template>
  <div>
    <a class="btn btn-primary" href="#" role="button"> Bootstrap</a>
  </div>
</template>
使えた！

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-20T07:43:19+09:00

Vue.js×FullCallendarでWEBカレンダー作成

はじめに

耳鼻咽喉科の開業医をしています。
花粉症の患者さんに使ってもらえるような花粉飛散情報が分かるカレンダーアプリを作りたいと思っています。
調べてみるとFullCallendarというオープンソースのJavaScriptライブラリがあり、カレンダーのUIと機能を簡単に実装できるようです。
今回カレンダーを表示して予定を入れるところまで挑戦してみました。

完成図

作成

こちらの記事を参考にさせていただきました。ありがとうございます。
【忘却のJavaScript #3】Vue.jsでカレンダーを表示してみる

１．vueプロジェクトの作成

コマンドプロンプトから以下のコマンドを実行し、雛形プロジェクトを作成します。
> vue create sample-app
質問に答えていきます。今回は以下のように設定しました。

Please pick a preset: ⇒ "Manually select features"
Check the features needed for your project:
(＊) Babel
(　) TypeScript
(　) Progressive Web App (PWA) Support
(＊) Router
(＊) Vuex
(　) CSS Pre-processors
(＊) Linter / Formatter
(＊) Unit Testing
(＊) E2E Testing
(＊) CSS Pre-processors
User history mode for router? ⇒ "n"
Pick a liner / formatter config: ⇒ "ESLint + Prettier"
Pick additional lint features: ⇒ "Lint on save"
Pick a unit testing solution: ⇒ "Jest"
Pick a E2E testing solution: ⇒ "Cypress (Chrome only)"
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? ⇒ "In package.json"
Save this as a preset for future projects? ⇒ "y"
Save preset as: ⇒ "sample-app"
Pick the package manager to use when installing dependencies: ⇒ "Use Yarn"

プロジェクトをVSCodeから開いて確認してみると以下の画像のようにプロジェクトのディレクトリ階層が構築されていることを確認できます。

以下のコマンドを実行して起動を行います。
> yarn serve
http://localhost:8080/
にアクセスし、「Welcome to Your Vue.js App」のページが表示されれば成功です。

2.FullCalendarのインストール

以下のコマンドを実行し、ライブラリをインストールします。
> npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid
3.Calendar.vueの作成

src\components配下にCalendar.vueを作成しました。
<style lang='scss'>
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
</style>

<template>
  <FullCalendar defaultView="dayGridMonth" :plugins="calendarPlugins" />
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'

export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data() {
    return {
      calendarPlugins: [ dayGridPlugin ]
    }
  }
};
</script>
4.src\index.jsにCalendar.vueへのリクエストパスを記述
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "home",
    component: Home
  },
  {
    path: "/about",
    name: "about",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  },
  ///////ここに追記///////
  {
    path: "/calendar",    
    name: "calendar",
    component: () =>import("../components/Calendar.vue")
  }
  ///////ここに追記///////
];

const router = new VueRouter({
  routes
});

export default router;
5.App.vueの表示画面の変更
Calender.vueへのリンクを作成します。
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/calendar">Calendar</router-link>
    </div>
    <router-view />
  </div>
</template>
6.カレンダーの表示
以下のコマンドを実行します。
> yarn serve
http://localhost:8080/
にアクセスします。
Calendarへのリンクが表示されていればOKです。

Calendarに移動するとカレンダーが表示されています。

7.カレンダーに予定を入れられるようにする
こちらの記事を参考にさせていただきました。ありがとうございました。
高機能でかつ軽快に動作するカレンダーFullCalendarをNuxt.jsで使う

Calendar.vueを以下のように変更しました。
<style lang="scss">
@import "~@fullcalendar/core/main.css";
@import "~@fullcalendar/daygrid/main.css";
</style>

<template>    
 <FullCalendar 
    default-view="dayGridMonth"
    :locale="locale"
    :header="calendarHeader"
    :weekends="calendarWeekends"
    :plugins="calendarPlugins"
    :events="calendarEvents"
    @dateClick="handleDateClick"
  /> 
</template>

<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import jaLocale from "@fullcalendar/core/locales/ja"; // 日本語化用

export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data() {
    return {      
      locale: jaLocale, // 日本語化
      // カレンダーヘッダーのデザイン
      calendarHeader: {
        left: "prev,next today",
        center: "title",
        right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
      },
      calendarWeekends: true, // 土日を表示するか
      // カレンダーで使用するプラグイン
      calendarPlugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
      // カレンダーに表示するスケジュール一覧
      calendarEvents: [
        {
          title: "報告会",
          start: "2020-03-10T10:00:00",
          end: "2020-03-10T12:30:00"
        },
        {
          title: "ミーティング",
          start: "2020-03-12T10:30:00",
          end: "2020-03-12T12:30:00"
        },
        {
          title: "打ち合わせ",
          start: "2020-03-18T13:30:00",
          end: "2020-03-18T14:30:00"
        }
      ]
    };
  },
  methods: {
    handleDateClick(arg) {
      if (confirm("新しいスケジュールを" + arg.dateStr + "に追加しますか ?")) {
        this.calendarEvents.push({
          // add new event data
          title: "新規スケジュール",
          start: arg.date,
          allDay: arg.allDay
        });
      }
    }
</script>
予定を表示することができました。

考察

FullCallendarを利用してカレンダーを表示することができました。このデザインを自分で最初からやっていたらとても大変ですね。
今度はユーザー認証機能を実装したいと思っています。

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-20T07:43:19+09:00

Vue.js×FullCallendarでWEBカレンダー作成（花粉カレンダー作成①）

はじめに

耳鼻咽喉科の開業医をしています。
花粉症の患者さんに使ってもらえるような花粉飛散情報が分かるカレンダーアプリを作りたいと思っています。
調べてみるとFullCallendarというオープンソースのJavaScriptライブラリがあり、カレンダーのUIと機能を簡単に実装できるようです。
今回カレンダーを表示して予定を入れるところまで挑戦してみました。

完成図

作成

こちらの記事を参考にさせていただきました。ありがとうございます。
【忘却のJavaScript #3】Vue.jsでカレンダーを表示してみる

１．vueプロジェクトの作成

コマンドプロンプトから以下のコマンドを実行し、雛形プロジェクトを作成します。
> vue create sample-app
質問に答えていきます。今回は以下のように設定しました。

Please pick a preset: ⇒ "Manually select features"
Check the features needed for your project:
(＊) Babel
(　) TypeScript
(　) Progressive Web App (PWA) Support
(＊) Router
(＊) Vuex
(　) CSS Pre-processors
(＊) Linter / Formatter
(＊) Unit Testing
(＊) E2E Testing
(＊) CSS Pre-processors
User history mode for router? ⇒ "n"
Pick a liner / formatter config: ⇒ "ESLint + Prettier"
Pick additional lint features: ⇒ "Lint on save"
Pick a unit testing solution: ⇒ "Jest"
Pick a E2E testing solution: ⇒ "Cypress (Chrome only)"
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? ⇒ "In package.json"
Save this as a preset for future projects? ⇒ "y"
Save preset as: ⇒ "sample-app"
Pick the package manager to use when installing dependencies: ⇒ "Use Yarn"

プロジェクトをVSCodeから開いて確認してみると以下の画像のようにプロジェクトのディレクトリ階層が構築されていることを確認できます。

以下のコマンドを実行して起動を行います。
> yarn serve
http://localhost:8080/
にアクセスし、「Welcome to Your Vue.js App」のページが表示されれば成功です。

2.FullCalendarのインストール

以下のコマンドを実行し、ライブラリをインストールします。
> npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid
3.Calendar.vueの作成

src\components配下にCalendar.vueを作成しました。
<style lang='scss'>
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
</style>

<template>
  <FullCalendar defaultView="dayGridMonth" :plugins="calendarPlugins" />
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'

export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data() {
    return {
      calendarPlugins: [ dayGridPlugin ]
    }
  }
};
</script>
4.src\index.jsにCalendar.vueへのリクエストパスを記述
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "home",
    component: Home
  },
  {
    path: "/about",
    name: "about",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  },
  ///////ここに追記///////
  {
    path: "/calendar",    
    name: "calendar",
    component: () =>import("../components/Calendar.vue")
  }
  ///////ここに追記///////
];

const router = new VueRouter({
  routes
});

export default router;
5.App.vueの表示画面の変更
Calender.vueへのリンクを作成します。
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/calendar">Calendar</router-link>
    </div>
    <router-view />
  </div>
</template>
6.カレンダーの表示
以下のコマンドを実行します。
> yarn serve
http://localhost:8080/
にアクセスします。
Calendarへのリンクが表示されていればOKです。

Calendarに移動するとカレンダーが表示されています。

7.カレンダーに予定を入れられるようにする
こちらの記事を参考にさせていただきました。ありがとうございました。
高機能でかつ軽快に動作するカレンダーFullCalendarをNuxt.jsで使う

Calendar.vueを以下のように変更しました。
<style lang="scss">
@import "~@fullcalendar/core/main.css";
@import "~@fullcalendar/daygrid/main.css";
</style>

<template>    
 <FullCalendar 
    default-view="dayGridMonth"
    :locale="locale"
    :header="calendarHeader"
    :weekends="calendarWeekends"
    :plugins="calendarPlugins"
    :events="calendarEvents"
    @dateClick="handleDateClick"
  /> 
</template>

<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import jaLocale from "@fullcalendar/core/locales/ja"; // 日本語化用

export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data() {
    return {      
      locale: jaLocale, // 日本語化
      // カレンダーヘッダーのデザイン
      calendarHeader: {
        left: "prev,next today",
        center: "title",
        right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
      },
      calendarWeekends: true, // 土日を表示するか
      // カレンダーで使用するプラグイン
      calendarPlugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
      // カレンダーに表示するスケジュール一覧
      calendarEvents: [
        {
          title: "報告会",
          start: "2020-03-10T10:00:00",
          end: "2020-03-10T12:30:00"
        },
        {
          title: "ミーティング",
          start: "2020-03-12T10:30:00",
          end: "2020-03-12T12:30:00"
        },
        {
          title: "打ち合わせ",
          start: "2020-03-18T13:30:00",
          end: "2020-03-18T14:30:00"
        }
      ]
    };
  },
  methods: {
    handleDateClick(arg) {
      if (confirm("新しいスケジュールを" + arg.dateStr + "に追加しますか ?")) {
        this.calendarEvents.push({
          // add new event data
          title: "新規スケジュール",
          start: arg.date,
          allDay: arg.allDay
        });
      }
    }
</script>
予定を表示することができました。

考察

FullCallendarを利用してカレンダーを表示することができました。このデザインを自分で最初からやっていたらとても大変ですね。
今度はユーザー認証機能を実装したいと思っています。

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-20T00:03:37+09:00

vuejs axios クロスドメイン対策

postの場合、サーバサイドでなんとかなったが、
getの場合うまく行かなかったのでfrontエンドで下記のようにした
    data: () => ({
        ...
        headers: {
            'Content-Type': 'application/json;charset=UTF-8',
            'Access-Control-Allow-Origin': '*',
        }

        axios.get(this.apiBaseUrl + '(URL)', this.headers)
            .then((response) => {
                this.xxx = response.data;
            })

　 Tweet
Qiitaで続きを読む

20200120のvue.jsに関する記事は17件です。

Vue.js(Vuex) で mapActions に別名（エイリアス）を付けて扱う

例

Vue.jsコンポーネント内でLaravelの .envを使用する方法

これまで

対処

所存

参考

NuxtのasyncDataとdataの使い分け方

asyncDataとdataのに違いについて調査してみた

async/awaitについて調査

SSR時の実行順序について調査

SPAページ遷移時の実行順序について

それぞれがreturnしたオブジェクトの上書きについて

結論

Vue.js CSSプロパティを要素に付与する方法

CSSプロパティを付与する方法は２つある

要素に直接複数のプロパティを指定して付与する

予めvue側で用意したオブジェクト型を用いて付与する（推奨）

おまけ Object型を二つ付与する方法

?Nuxt.js とFirebaseを使ってログイン機能を実装する。 その１

Nuxt.jsとは

Nuxtアプリケーションの生成

アプリケーションの名前

アプリケーションの説明

作者の名前

パッケージマネージャーの選択

UIフレームワークの選択

サーバーサイドのフレームワークの選択

Nuxtモジュールの選択

コードフォーマッターの選択

テストフレームワークの選択

レンダリング方法

デベロップメントツールの選択

Nuxtの実行

Nuxtのディレクトリ構造

assets

components

layouts

middlware

pages

plugins

static

store

nuxt.config.js

まとめ

?【初心者】Nuxt.js とFirebaseを使ってログイン機能を実装する。 その１

Nuxt.jsとは

Nuxtアプリケーションの生成

アプリケーションの名前

アプリケーションの説明

作者の名前

パッケージマネージャーの選択

UIフレームワークの選択

サーバーサイドのフレームワークの選択

Nuxtモジュールの選択

コードフォーマッターの選択

テストフレームワークの選択

レンダリング方法

デベロップメントツールの選択

Nuxtの実行

Nuxtのディレクトリ構造

assets

components

layouts

middlware

pages

plugins

static

store

nuxt.config.js

まとめ

Vue.js/Nuxt.js: 「img要素の高さ」に「img要素上のdiv要素の高さ」を合わせる

はじめに

つまり何がしたいの？

Gif

イメージ

コード

意識したこと

Vue.js / Nuxt.js: 「img要素の高さ」に「img要素上のdiv要素の高さ」を合わせる

?Nuxt.js とFirebaseを使ってログイン機能を実装する。その１

?【初心者】Nuxt.js とFirebaseを使ってログイン機能を実装する。その１