Vue.jsでWebサイトを作るときに使ったライブラリ
Webサイトでよく見る動きや機能を追加しようとしたときに便利だった、実際に使ったライブラリのリストです。
vue-backtotop
名前の通り、トップに戻るボタンです。
ボタンに表示する文字やアイコンの変更も簡単。
vue-scrollto
ページ内リンクにスムーススクロールをつけるときに使いました。
Webサイトのヘッダーをトップに固定しているとスクロール先がヘッダーの下に潜りこんでしまうので、offsetの設定を忘れずに。
main.js
Vue.use(VueScrollTo, {
offset: -80 //headerの高さの分
})
offset以外にもスクロールの速度なども設定できます。
他画面からの移動
idを指定するだけではアンカーリンクが機能しなかったので以下のように対処しました。
URLパラメータからアンカーを取得し、this.$scrollTo()を使ってスクロール。
移動先のページ
mounted () {
const hash = this.$route.hash
if (hash && hash.match(/^#.+$/)) {
this.$scrollTo(hash)
}
}
しかし、これだけだとページの中にidを指定しているにも関わらず、 [vue-scrollto warn]: Trying to scroll to an element that is not on the page となってしまいました。むむむ。
setTimeout()してみたら動きました。
mounted() {
setTimeout(this.scroll, 300);
},
methods: {
scroll() {
const hash = this.$route.hash;
if (hash && hash.match(/^#.+$/)) {
this.$scrollTo(hash);
}
}
}
vue-carousel
カルーセルが簡単に実装できます。
マウスドラッグやスマホのスワイプでも動く。便利。
カスタマイズの設定はGitHubで確認。
vue-material-design-icons
マテリアルデザインアイコン。
使いたいところにコンポーネントを入れるだけなのでお手軽。
アイコンの名前を調べる時はこちらのページが便利。
vue-meta
title、descriptionやogなど、headに記述するメタ情報の設定に使いました。
vue-social-sharing
FacebookやTwitterなど、SNSのシェアボタンを各ページに付けるときに。
google-maps-api-loader
GoogleMapを入れるときに使いました。
ページにマップを追加するコンポーネントを作る時はこのあたりを参考にしました。
Practical use of scoped slots with GoogleMaps
Vue.jsでライブラリ使わずにgoogle mapを利用する
date-fns
日付の書式を整えるときに使いました。