---

FirebaseとCloud Firestoreの基本を学習したので、
Vue.jsを使ってリアルタイムで更新される某チャンネル掲示板風のページを作ってみようとして、

前段も前段、Firestoreへの読み込み／書き込みの部分で失敗した記事です。

なので一番やりたかった既存ページを再現するCSSコーディング（写経と読んでいます）すらできませんでした。

身の有る記事を読みたいほとんどの方には読む価値ない記事ですが、
Nuxt.jsアプリの簡単な立ち上げ方やホスティング先としてのFirabaseの使い勝手の良さは少しだけ含んでいます。（その辺りまでは楽しいしすごく簡単だったのに・・・）

出来損ない(GitHub)
https://github.com/RatchoTetsugaku/practice-Nuxt_firestore_BBS

概要

• node.js 12.3.1
• Nuxt.js 2.0.0
• Firebase
• Cloud Firestore

環境構築

Nuxt.js環境

今回は学習がてらVue.jsのフレームワークとして一番メジャーなNuxt.jsを使用します。
他フレームワークの例に漏れずNuxtもcreate-***-appがあるので、npxを使って有難く使わせて頂きます。

$ npx create-nuxt-app <project_directory> 

$ ## 対話形式で以下の通り設定
✨  Generating Nuxt.js project in <project_directory>/
? Project name <project_directory>
? Project description My bedazzling Nuxt.js project
? Author name
? Choose the package manager Npm
? Choose UI framework Vuetify.js ## 今回はVuetifyにチャレンジ
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios ## 念の為
? Choose linting tools
? Choose test framework None
? Choose rendering mode Single Page App ## 超簡易なのでSPAです
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)

$ cd <project_directory>
$ npm run dev

http://localhost:3000でテストアプリが立ち上がります。

Firebaseプロジェクト作成

次にFirebase Consoleでプロジェクトを追加します。
（無料枠ではプロジェクト追加上限は5件らしいので、私は既に作成していたプロジェクトを再利用…）

詳細は公式ドキュメントをご参考にどうぞ。
https://docs.kii.com/ja/samples/push-notifications/push-notifications-android-fcm/create-project

NuxtとFirebaseを接続

Firebaseの設定やデプロイに利用するのでfirebase-toolsをインストールしておきます。

$ npm i -g firebase-tools
$ firebase login

firebase loginするとgoogleアカウントの選択画面が表示されるので、使用するアカウントを選択してアクセス許可をします。
次にrootディレクトリのまま以下を実行します。

$ firebase init

対話形式で以下のように設定します（何か間違っているかも・・・）

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. 
## Firestore: Deploy rules and create indexes for Firestore,
## Hosting: Configure and deploy Firebase Hosting sites

? Please select an option: ## Use an existing project

? What file should be used for Firestore Rules? ## firestore.rules

? What file should be used for Firestore indexes? ## firestore.indexes.json

## 重要！
? What do you want to use as your public directory? ## dist

? Configure as a single-page app (rewrite all urls to /index.html)? ## No

env設定

init後は、自動でdist/にfirebase標準ファイル群が作成されています。

次に@nuxtjs/dotenvを使ってFirebaseの接続情報を.envファイルから読み込めるようにしましょう。
参考：Nuxt.jsにおけるenvファイルの利用(初学者向けハンズオン) by@yfujii1127

$ npm i @nuxtjs/dotenv

nuxt.config.jsのmodulesに@nuxtjs/dotenvの設定を追加。

nuxt.config.js

module.exports = {
  /*・・・*/
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/dotenv', /* 追記 */
  ],
  /*・・・*/
}

rootディレクトリに.envファイルを作成して、Firebase公式ページからコピーしてきたFirebaseの接続情報を記述します。

$ touch .env

.env

FB_API_KEY='*****************************';
FB_AUTH_DOMAIN='*****************************';
FB_DATABASE_URL='*****************************';
FB_PROJECTID='*****************************';
FB_STORAGE_BUCKET='*****************************';
FB_MESSAGING_SENDER_ID='*****************************';

後はNuxtアプリ内でもprocess.env.FB_API_KEYで設定した値を呼び出せるはず・・・

firebase.initializeApp({***})のプラグイン化

/plugins/firebase.js

import firebase from "firebase";
import 'firebase/firestore';

const config = {
  apiKey: process.env.FB_API_KEY,
  authDomain: process.env.FB_AUTH_DOMAIN,
  databaseURL: process.env.FB_DATABASE_URL,
  projectId: process.env.FB_PROJECTID,
  storageBucket: process.env.FB_STORAGE_BUCKET,
  messagingSenderId: process.env.FB_MESSAGING_SENDER_ID
}
if (!firebase.apps.length) firebase.initializeApp(config)

const firestore = firebase.firestore()
// 起動してみると「timestampsInSnapshotsはもう設定しなくて良いよ！」というエラーが出力されたので、
// 引数なしでfirestore.settings({})をそのまま実行
firestore.settings({})
export { db }

nuxt.config.js

module.exports = {
  /*・・・*/
  plugins: [
    '~/plugins/firebase.js',
  ],
  /*・・・*/
}

これ以降このプロジェクトでFirebase関係のAPIを用いる時は

import db from '~/plugins/firebase'

とすると、キー情報が入ったFirebase（Cloud Firestore）が使えるようになります。
参考：FirebaseとNuxt.jsを使ってユーザ認証関係を簡単に作ってみる+1ヶ月前の自分に教えたいリンク集 by@redshoga

仮でデプロイ

firebase deployで初期設定したディレクトリをFirebaseにデプロイできます。

$ npm run generate  ## dist/に静的ファイルを吐く
$ firebase deploy   ## dist/をアップ

・・・
Hosting URL: https://***********.firebaseapp.com
・・・

仮ですがhttps://***********.firebaseapp.comとしてデプロイされました。

すごい簡単！

試しにFirestoreからデータを保存・取得してみる

?ここで躓きました！?

参考記事を基にとりあえず、Firestoreからデータの読み込みと書き込みを試したところで
動作せず、、、以下を試してみましたが解決しませんでした。

コードは以下の通りですが、.addにおける.thenも.catchも動作せず。。。

addComment() {
      const now = new Date()
      // コメントをdbへ登録
      db.collection('comments')
        .add({
           content: this.inputComment,
           avatar:
             'https://picsum.photos/50?image=' +
             (Math.floor(Math.random() * 400) + 1),
           createdAt: now
        })
        .then(doc => {
          console.log(`登録に成功しました (${doc.id})`)
        })
        .catch(error => {
          console.log(`登録に失敗しました (${error})`)
        })
      // ダイアログを閉じる
      this.hideCreateForm()
    },

確認したこと：コンポーネント外で、db.collection('comments').add(~)を実行してみる

同じ挙動で、読み込みや書き込みも動かずエラー出力などもなし。

確認したこと：Firestore rulesに誤りないか

もともとデフォルト設定である「全て許可」でしたが、
さらに追加で: if true;を追記してみましたが影響なし。

確認したこと：ドキュメントIDを明示的に指定してみる

db.collection('comments').orderBy('createdAt', 'desc')

//自動ID割り当てなので不要なはずの .doc() を使ってみる
db.collection('comments').doc('uBqkISFQ0F191cgGOsy1').orderBy('createdAt', 'desc')

変化なし。

まとめ

１つクリアできれば視界が開けそうなのでリベンジします?

↓↓完成動画

⛱️Vue.js⛱️CodePen⛱️
?Vue.js シャッフル選択?作ってみたよぉ?https://t.co/cAArP8R6iW#vuejs pic.twitter.com/LLQxCnfq76

— non (@nonnonkapibara) August 30, 2019

Vue.jsで、ハート型のボタンをTapする度に、シャッフル表示するサンプル。

See the Pen nonShuffleSelection by noriko fujita (@nonkapibara) on CodePen.

対象

下記のような非同期処理（Vueのmethodsの中、signInアクションはPromiseを返す）を順番(例えば、dispatch評価後にrouterが呼ばれている事を確認したいなど)に評価したい場合、どうしたら良いかわからない方向け

this.$store.dispatch('signIn', { loginId, password })
  .then(() => {
    this.$router.push('/')
  })
  .catch((error) => {
    this.error = error.message
   }
)

問題点

下記のテストコードだとdipatch実行後,then後の処理に移るまでに後者が評価されてしまいテストが失敗する。

expect($store.dispatch).toHaveBeenCalledWith('signIn', testUserInfo)
expect($router.push).toHaveBeenCalledWith('/')

解消方法

前者のPromiseが評価された後に後者が評価されるようにすれば良い。

await expect($store.dispatch).toHaveBeenCalledWith('signIn', testUserInfo)
expect($router.push).toHaveBeenCalledWith('/')

他、

もう少しスマートで可読性に優れた方法があれば教えて頂けると嬉しいです。

はじめに

某デジタルメディアでGASを使ってを社内ツールを開発している情報系学部4年生です。
WebアプリケーションをVue.jsで書き、バックエンドや各種APIコールなどをGoogle Apps Scriptで処理し、データベースにスプレッドシートを使用することでインフラコスト0で運用できる。

Webアプリケーション側からGAS内のコードを走らせてその戻り値を受け取るために
google.script.run を使用すると楽に実装できるが、サーバサイドのコードを走らせているため、非同期処理となり、複数のスプレッドシートを読み込んで実装する場合はコールバック地獄が発生する。

その問題を解決できたので、簡単にメモ
参考にしたサイト

コード

フロントのVue.jsの処理を以下のように実装する。

hoge.js

let db = new Vue({
  el: '#app',
  data: {
    sheet_a: null,
    sheet_b: null,
  },
  methods: {
    loadData: async function() {
      //ここに書くと順番に実行される
      const sheet_a = await this.getSheetA();
      console.log('成功!取得したデータ: ' + JSON.stringify(sheet_a));
      this.sheet_a = sheet_a;


      const sheet_b = await this.getSheetB();
      console.log('成功!取得したデータ: ' + JSON.stringify(sheet_b));
      this.sheet_b = sheet_b;
      //全部のデータを取得した後に実行したい処理を下に記述

    },

    getSheetA: function() {
      //コード.js内のgetSheetA()を実行
      return new Promise((resolve, reject) => {
        google.script.run
          .withSuccessHandler((result) => resolve(result))
          .withFailureHandler((error) => resolve(error))
          .getSheetA();
      });
    },
    getSheetB: function() {
      //コード.js内のgetSheetB()を実行
      return new Promise((resolve, reject) => {
        google.script.run
          .withSuccessHandler((result) => resolve(result))
          .withFailureHandler((error) => resolve(error))
          .getSheetB();
      });
    }

  },
  //マウント時
  mounted: function() {
    //マウント時にシートを取得
    this.loadData();
  },
});

一応GAS側で実行されるコードも記述しておきます。
※本来はdoGet()関数内にHTMLファイルを返すためのコードを書かないといけません。
GAS×Vueで簡単なWebアプリを作る方法はこちら

コード.gs

function getSheetA() {
  var sheet = SpreadsheetApp.getActive().getSheetByName('シート1');
  var rows = sheet.getDataRange().getValues();
  var keys = rows.splice(0, 1)[0];
  return rows.map(function(row) {
    var obj = {};
    row.map(function(item, index) {
      obj[String(keys[index])] = String(item);
    });
    return obj;
  });
}

function getSheetB() {
  var sheet = SpreadsheetApp.getActive().getSheetByName('シート2');
  var rows = sheet.getDataRange().getValues();
  var keys = rows.splice(0, 1)[0];
  return rows.map(function(row) {
    var obj = {};
    row.map(function(item, index) {
      obj[String(keys[index])] = String(item);
    });
    return obj;
  });
}

Vue.jsでモーダルウィンドウを実装してみた

Vue.jsによるタブ切り替えの実装、Vue.jsによるカルーセルスライダーの実装に引継ぎスタンダードなUIに
モーダルウィンドウがありますが、それもVue.jsでは簡単に実装する事ができます。
今回は「vue-js-modal」を使ってモーダルウィンドウを実装してみます。

「vue-js-modal」とは

Vue.jsで簡単にモーダルウィンドウを導入できるプラグインです。
導入は、npmコマンドで導入する方法とCDNより読み込む方法があります。
今回はCDNで簡易的に導入します。

See the Pen GRKvKME by YusukeIkeda (@YusukeIkeda) on CodePen.

npmで導入する場合は下記コマンドを実行

npm install vue-js-modal --save

CDNで導入する場合は下記JSを読み込む

https://cdn.jsdelivr.net/npm/vue-js-modal@1.3.28/dist/index.min.js

HTML

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-js-modal</title>
<style>
.modal-area-inner{
  padding: 10px;
  box-sizing: border-box;
  position: relative;
}
.modal-area-inner .hide{
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 12px;
}
</style>
</head>
<body>
<div id="app">
  <button class="button" v-on:click="show">モーダルウィンドウを表示</button>
  <modal name="modal-area">
    <div class="modal-area-inner">
    <p>モーダルウィンドウが表示されました。</p>
    <span class="hide" v-on:click="hide">閉じる[close]</span>
    </div>
 </modal>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-js-modal@1.3.28/dist/index.min.js"></script>
<script src="modal.js"></script>
</body>
</html>

JavaScript

vue-js-modalプラグインの取り込み

modal.js

Vue.use(window["vue-js-modal"].default);

メソッドの用意

modalテンプレートを呼び出すためのメソッドを用意します。

modal.js

var app = new Vue({
  el: '#app',
  methods: {
    show: function() {
      this.$modal.show('modal-area');
    },
    hide: function() {
      this.$modal.hide('modal-area');
    },
  }
});

よく使いそうなオプション

ウィンドウの幅指定

モーダルウィンドウの幅を指定したい場合は:width="300"を付与するだけでＯＫです。
デフォルトの幅600になっています。

モーダルウィンドウのサイズを可変にする

スライドの速度を指定する場合はは:resizable="true"を指定します。
デフォルト値はfalseです。

モーダルウィンドウを遅らせて表示させる。

モーダルウィンドウを遅延させて表示させたい場合は:delay="1000"を付与します。
ページを表示させた後一定時間後に表示させたい場合などに便利です。

オプション指定例

  <modal name="modal-area" :width="300" :height="300" :resizable="true" :delay="5000">
    <div class="modal-area-inner">
    <p>モーダルウィンドウが表示されました。</p>
    <span class="hide" v-on:click="hide">閉じる[close]</span>
    </div>
 </modal>

上記以外にも以下の表のように様々なオプションが用意されています。

name	必須	型	初期値
name	true	[String, Number]
delay	false	Number	0
resizable	false	Boolean	false
adaptive	false	Boolean	false
draggable	false	[Boolean, String]	false
scrollable	false	Boolean	false
reset	false	Boolean	false
clickToClose	false	Boolean	true
transition	false	String
overlayTransition	false	String	'overlay-fade'
classes	false	[String, Array]	'v--modal'
width	false	[String, Number]	600
height	false	[String, Number]	300
minWidth	false	Number (px)	0
minHeight	false	Number (px)	0
maxWidth	false	Number (px)	Infinity
maxHeight	false	Number (px)	Infinity
pivotX	false	Number (0 - 1.0)	0.5
pivotY	false	Number (0 - 1.0)	0.5
root	false	Vue instance	null

まとめ

Vue.jsではモーダルウィンドウもプラグインを使うことで簡単に実装する事ができました。
標準なUIについてはほぼプラグインが用意されているので、Vue.jsそのもの仕様を理解してオリジナルで作成してみようと思います。
・参考 https://www.npmjs.com/package/vue-js-modal

TL;DR

• 既存のVueプロジェクトにTypeScriptを導入したい際にやったことをまとめた
• vue-cliやnuxtを利用したプロジェクトではない
• extendではなくデコレータ方式で記述する

バージョン

• webpack: 4.33.0
• typescript: 3.5.3
• vue-property-decorator: 8.2.1
• ts-loader: 6.0.4
• @typescript-eslint/parser: 1.12.0
• @vue/eslint-config-typescript: 4.0.0
• vue-eslint-parser: 6.0.4
• ts-jest: 24.0.2

実際に導入する

Vue

関連モジュール

$ npm i -D typescript vue-property-decorator

型定義ファイル(d.ts)を作成する。

index.d.ts

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

Webpack

関連モジュールのインストール

$ npm i -D ts-loader

webpack.config.jsの設定

webpack.config.js

...
{
  test: /\.ts$/,
  loader: "ts-loader",
  exclude: "/node_modules/",
  options: {
    appendTsSuffixTo: [/\.vue$/]
  }
}
...

ESLint

関連モジュールのインストール

$ npm i -D @typescript-eslint/parser @vue/eslint-config-typescript vue-eslint-parser

.eslintrc.jsの設定

eslintrc.js

module.exports = {
  ...
  extends: [
    'plugin:vue/recommended',
    'eslint:recommended',
    '@vue/typescript'
  ],
  parser:  'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaFeatures: {
      "legacyDecotators": true
    }
  },
  ...
}

Jest

関連モジュールのインストール

$ npm i -D ts-jest

jest.config.jsの設定

jest.config.js

module.exports = {
  moduleFileExtensions: ["js", "jsx", "json", "vue", "ts"],
  transform: {
    "^.+\\.vue$": "vue-jest",
    "^.+\\.(ts|tsx)$": "ts-jest"
  },
  transformIgnorePatterns: ["node_modules/"],
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/js/$1"
  },
  snapshotSerializers: ["jest-serializer-vue"],
  testMatch: ["**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
  testURL: "http://localhost/",
  setupFiles: [
    "<rootDir>/tests/unit/jest-env.js"
  ],
  globals: {
    "ts-jest": {
      "tsConfigFile": "tsconfig.json"
    }
  },
  watchPlugins: [
    "jest-watch-typeahead/filename",
    "jest-watch-typeahead/testname"
  ],
  "collectCoverage": true,
  "collectCoverageFrom": ["src/js/**/*.{js,vue}"]
};

型定義ファイル

使ってるライブラリの型定義ファイル(@types/〇〇)をインストールしておく。

TypeScriptの設定ファイル

tsconfig.jsonを作成する。

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "strict": false,
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "es2019",
      "esnext",
      "dom"
    ],
    "resolveJsonModule": true
  }
}

【Markdown】9.9秒で3x3の表を作るChrome拡張を作った。

時間測定2: 9971.44091796875ms

ボルト並みの速度ですね。

作った表。

ちゃんとした表

時間測定: 40985.581787109375ms

40.9秒なので、400m ウェイド・バンニーキルク さんくらいの記録でしょうか。

	緊急度（高）	緊急度（低）
重要度（高）	1	2
重要度（低）	3	4

拡張へのリンク

https://chrome.google.com/webstore/detail/table-to-markdown-creater/hhahknpikfglcfiepppleiobpgdfaank?hl=ja

ちょっとした技術解説

GitHub https://github.com/ykhirao/TableToMd

• Vue create で作った普通のVue.jsアプリ
• build で dist/ というディレクトリにバンドルしています
• cp:contents で、その時に必須のファイルをコピーしてます(webpackに任せる方法でやっても可だと思います)
• zip でChrome拡張配布ようにZIPファイルに変換しています

package.json

  "scripts": {
    "serve": "vue-cli-service serve",
    "lint": "vue-cli-service lint",
    "build": "vue-cli-service build && npm run cp:contents",
    "zip": "bestzip TableToMd.zip dist/*",
    "cp:contents": "cpx src/manifest.json dist/ && cpx src/icon-128.png dist/"
  },

開発してちょっと詰まったところ

manifest.json

{
  "manifest_version": 2,
  "version": "0.1",
  "name": "Table To Markdown Creater",
  "short_name": "TableToMd",
  "description": "Chrome and Firefox exetension",
  "browser_action": {
    "default_icon": {
      "19": "icon-128.png"
    },
    "default_popup": "index.html",
    "default_title": "TableToMd"
  },
  "homepage_url": "https://github.com/ykhirao/TableToMd",
  "icons": {
    "128": "icon-128.png"
  },
  "permissions": [
    "activeTab"
  ]
}

permissions は http://* とかにすると審査が伸びるみたいな雰囲気でした。途中で activeTab に変更して、3日で審査追えました。
manifest_version は 2 固定みたいですね。

ちゃんと公式を確認してから開発始めたほうがいいと思います。

Gsuite使っている人向け

Chrome拡張の開発と公開は普通5ドルの課金が必要ですが、同じGsuite内だけの配布なら課金なしで始めれるので、社内ツールとか作るのはとてもよいと思いました。

ゆる募

• スタイルあててくれる人
• アイコン作ってくれる人

最後に

読んでいただきありがとうございました！！

Vue.jsでカルーセルスライダー実装してみた

以前Vue.jsによるタブ切り替えの実装を紹介しましたが、Vue.jsではカルーセルスライダーも簡単に実装する事ができます。
今回は「Vue Carousel」を使ってカルーセルスライダーを実装してみます。

「Vue Carousel」とは

jQueryのslick.jsのように簡単にカルーセルスライダーを導入できるプラグインです。
導入は、npmコマンドで導入する方法とCDNより読み込む方法があります。
今回はCDNで簡易的に導入します。

See the Pen VwZWJQx by YusukeIkeda (@YusukeIkeda) on CodePen.

CSS

Vue Carouselを導入してブラウザのコンソールよりで要素を確認すると.VueCarousel-slideというクラスが生成されているのが分かります。今回はそのclassにCSSを適用します。

CSS

.VueCarousel-slide {
  font-size:12px;
  display: flex;
  align-items: center;
  justify-content: center;
  height:100px;
  background:#ccc;
  border-right:1px solid #FFF;
  box-sizing:border-box;
}

上記CSSを適用したクラスについてはコンソールにて確認する事ができます。

動的に生成されたHTML要素

<div class="VueCarousel">
  <div class="VueCarousel-wrapper">
    <div class="VueCarousel-inner" style="transform: translate(0px, 0px); transition: transform 0.5s ease 0s; flex-basis: 514.5px; visibility: visible; height: auto;">
　　　<!--VueCarousel-slideというクラスが動的に生成されている事が確認できる-->
      <div tabindex="-1" aria-hidden="true" role="tabpanel" class="VueCarousel-slide">Slide 1</div>
      <div tabindex="-1" aria-hidden="true" role="tabpanel" class="VueCarousel-slide">Slide 2</div><div tabindex="-1" aria-hidden="true" role="tabpanel" class="VueCarousel-slide">Slide 3</div>
    </div>
</div>
<div data-v-438fd353="" class="VueCarousel-pagination" style="">
  <div data-v-438fd353="" role="tablist" class="VueCarousel-dot-container" style="margin-top: 20px;">
      <button data-v-438fd353="" aria-hidden="false" role="tab" title="Item 0" value="Item 0" aria-label="Item 0" aria-selected="true" class="VueCarousel-dot VueCarousel-dot--active" style="margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(0, 0, 0);">
      </button>
      <button data-v-438fd353="" aria-hidden="false" role="tab" title="Item 1" value="Item 1" aria-label="Item 1" aria-selected="false" class="VueCarousel-dot" style="margin-top: 20px; padding: 10px; width: 10px; height: 10px; background-color: rgb(239, 239, 239);">
      </button>
    </div>
  </div>
</div>

HTML

HTML

<!DOCTYPE html>
<html>
<head>
<title>vue-carousel</title>
<link rel="stylesheet" type="text/css" href="slide.css">
</head>
<body>
<div id="app">
  <carousel>
    <slide>Slide 1</slide>
    <slide>Slide 2</slide>
    <slide>Slide 3</slide>
  </carousel>
</div>

<!-- Vue.jsをCDNで読み込む -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<!-- vue-carousel.jsをCDNで読み込む -->
<script src="https://cdn.jsdelivr.net/npm/vue-carousel@0.18.0/dist/vue-carousel.min.js"></script>
<script src="slide.js"></script>
</body>
</html>

JavaScript

下記は特にオプションを指定しない場合の設定です。

JavaScript

var app=new Vue({
  el: "#app",
  components: {
    'carousel': VueCarousel.Carousel,
    'slide': VueCarousel.Slide
  },
});

よく使いそうなオプション

自動再生

カルーセルスライダーを自動再生させたい場合はautoplay="true"を付与するだけでＯＫです。
次のスライドに移るタイミングは:autoplayTimeout="1000"で設定します。
デフォルト値は2000となっており、値を小さくするほど次のスライドへ移る時間が短くなります。

ループ再生

カルーセルスライダーをループ再生させたい場合は:loop="true"を指定します。
デフォルト値はfalseとなっております。

スライドのスピード

スライドの速度を指定する場合はは:speed="500"を指定します。
デフォルト値は500となっており、値を小さくするほどスピードは速くなります。

オプション指定例

<carousel :autoplay="true" :autoplayTimeout="1000" :loop="true" :speed="500">
  <slide>Slide 1</slide>
  <slide>Slide 2</slide>
  <slide>Slide 3</slide>
</carousel>

まとめ

CDNを読み込んでから数十分でカルーセルスライダーを作ることができました。
Vueに移行した際もこういったアニメーション要素のあるUIは心配なさそうです。
また他にも色々なオプションがgitHubで確認することができるので、ほとんどの案件で対応できるかと思います。

・参考
https://github.com/SSENSE/vue-carousel