【Vue.js】cowsayをブラウザ上に表示させてみた

はじめに

cowsayがかわいいのでVue.jsでブラウザ上に表示させたくなりました。

インストール

cowsay-browserを使用します。

ターミナル

npm install cowsay-browser

インポート

cowsay-browserをインポートします。

とりあえずコンソールに表示させてみます。

App.vue

<script>
import cowsay from 'cowsay-browser'

export default {
  created() {
    console.log(cowsay.say({text : "Hello!"}));
  }
}
</script>

来た！！

あとはブラウザに表示させるだけです。

ブラウザへ

App.vue

<template>
  <div>
    <pre>{{ cowsay }}</pre>
  </div>
</template>

<script>
import cowsay from 'cowsay-browser'
export default {
  data() {
    return {
      cowsay: '' 
    }
  },
  created() {
    this.cowsay = cowsay.say({text : "Hello!"});
  }
}
</script>

---

な、なんかズレて...る.......

調整する

せっかくなので少しソースコードをいじります。
node_modules>cowsay-browser>lib>cow-definitions.jsをいじればいけそうです。

cow-definitions.js

//-------省略


  "default": "$the_cow = <<\"EOC\";\r\n        $thoughts   ^__^\r\n         $thoughts  ( $eyes )\\\\_____\r\n             (__)\\\\              )\\\\/\\\\\r\n             $tongue       ||-------w |\r\n                      ||             ||\r\nEOC\r\n",


//-------省略

・・・まあいいでしょう！（投げやり）

おしまい