鈍足ランナーのIT日記

走るのが好きな5流のITエンジニアのブログ。

趣味の範囲は広いけど、どれも中途半端なクソブロガー楽しめるWebアプリを作ってあっと言わせたい。サーバーサイドPerl(Mojolicious)、クライアントサイドVue.js。Arduinoにも触手を伸ばす予定。

How to use ImageMap in Nuxt

イメージマップをnuxtjsで使おうと思って試行錯誤した結果。

www.jqueryscript.net

こんな感じでvueファイルを用意して、npm run devにて動作を試したけれど
リロードやリサイズしないと。イメージマップが有効に機能しない。なぜだ?!
nuxtjsだから?
為にしvue単体(ルーターなし)で実行して見たら。問題なく動いた。
またnuxtjsでもトップページで動かしたら動く。
nuxt-linkで遷移後の画面だと動かない。

<template>
  <section class="container">
    <img src="map.png" usemap="#ImageMap" alt="">
    <map name="ImageMap">
      <area shape="rect" coords="549,424,597,456" href="#" alt="" @click="link($event, 22)">
      <area shape="rect" coords="599,424,647,461" href="#" alt="" @click="link($event, 14)">
      <area shape="circle" coords="65,62,36" href="#" alt="">
    </map>
  </section>
</template>

<script>
import $ from 'jquery'
require('image-map')
export default {
  mounted() {
    $('img[usemap]').imageMap()
  },


以下、動かないサンプルのnuxtjsアプリです。

github.com

Nuxt.jsでJQuery+ maphilightを使う

https://www.npmjs.com/package/maphilight

こんな感じで使って動いたようだけど。。あっているのかわからない。

<script>
import $ from 'jquery'
require('maphilight')
export default {
  mounted() {
    $('.map').maphilight()
  }
}

Nuxt.js generateしたものをGithub pagesへデプロイでハマる

nuxt.config.jsの編集

  router: {
    base: process.env.DEPLOY_ENV == 'GH_PAGES' ? '/<your repository name>/' : '/'
  }

こちらが素晴らしい
qiita.com

私の問題は、vueの方の定義がhrefの1文字目に/を入れていたのが問題だったようで。

あとは、パラメータを渡すところがうまく動かないなぁ。。

そもそも

aタグで書いていて、nuxt-linkにしたら1文字目/で普通に動きました。おいおい。。