NuxtjsとMathJaxで数式エディタをつくってみる


新しくNuxt.jsのプロジェクトを作成してから、`vue-loader`を使ってSCSSを導入するまでの手順です。公式にあるテンプレート利用しています。

SCSSとしていますがSassでも同様にできます。

## 環境

- Windows 10 Home
- Node.js v10.15.1
- npm 6.4.1
- yarn 1.15.2

Node.js / npm（ + yarn）の導入手順はこちらで紹介しています。
- [Windows](https://www.suzu6.net/posts/124-yarn-windows/)
- [Mac](https://www.suzu6.net/posts/45)
- [Ubuntu系](https://www.suzu6.net/posts/81-npm-install-ubuntu)

### 導入したもの

- node-sass: ^4.12.0
- nuxt: ^2.0.0
- sass-loader: ^7.1.0

## Nuxt.jsのプロジェクト作成

[Nuxt.jsのガイド](https://ja.nuxtjs.org/guide/installation)に従ってスターターテンプレートを使ってプロジェクトの作成を進めます。
個別にインストールしてスクラッチで作成することもできますが、`nuxt.config.js`の書き方など些細な点で悩むことが多いためテンプレートを使うことをお勧めします。

`<project-name>`は**sample**としておきます。

### create-nuxt-app を使用する

この項は[Nuxt.jsのガイド](https://ja.nuxtjs.org/guide/installation#nuxt-js-%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B9%E3%82%BF%E3%83%BC%E3%82%BF%E3%83%BC%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88)通りに進めて問題ないです。

```sh
# by npx
> npx create-nuxt-app sample

# by yarn
> yarn create nuxt-app sample
```

インストールが進み、sampleのフォルダが作成されました。
続いていくつか質問されます。
カーソルの位置のものを選択しています。
スタイルはスクラッチで開発する予定だったため、今回はUIフレームワークを使っていません。

```sh
? Project name (sample) # プロジェクト名は？
? Project description (My posh Nuxt.js project) # プロジェクト説明は？
? Author name (suzu6) # 制作者は？
# パッケージマネージャを選択
? Choose the package manager 
> Yarn
  Npm
# UI フレームワークを選択
? Choose UI framework (Use arrow keys) 
> None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Element
  iView
  Tachyons
  Tailwind CSS
  Vuetify.js
# サーバのフレームワークを選択
? Choose custom server framework (Use arrow keys) 
> None (Recommended)
  AdonisJs
  Express
  Fastify
  Feathers
  hapi
  Koa
  Micro
# モジュールを選択
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Axios
 ( ) Progressive Web App (PWA) Support
# リントツールを選択
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) ESLint
 ( ) Prettier
# テストのフレームワークを選択
? Choose test framework (Use arrow keys)
  None
> Jest
  AVA
# モードを選択（nuxt.configで変更可能）
? Choose rendering mode (Use arrow keys)
  Universal (SSR)
> Single Page App
```

インストールに成功したらのフォルダに移動して、立ち上げてみます。

```
> cd sample
> yarn dev
```

[http://localhost:3000/](http://localhost:3000/)でサイトを確認できます。


![template](/images/posts/170/173/1.png)


## SCSSを使えるようにする

本題です。

[vue-loader](http://vue-loader.vuejs.org/en/configurations/pre-processors.html)をインストールして`.vue`の中で`<style lang="scss">`を使えるようにします。

参考：[プリプロセッサを使うには？](https://ja.nuxtjs.org/faq/pre-processors)

### vue-loaderをインストール

`SCSS`に必要なモジュールをインストールします。

```sh
# by npm
> npm install sass-loader node-sass --save-dev

# by yarn
> yarn add npm install sass-loader node-sass
```
`pakage.json`
```json
  "dependencies": {
    "nuxt": "^2.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0"
  },
```

これで、`.vue`ファイル内で`SCSS`が使えるようになりました。
Nuxt.jsのホットリロードによってSCSSの修正が即座に反映され、開発が進みます。
以下のように`<style lang="scss">`を使えます。

```html
<style lang="scss">
.red {
  color: red
}
</style>
```

## 共通のSCSSファイルの設定

続いて、プロジェクトで共通のスタイルもSCSSで書けるようにします。

### .scssファイルを作成

`/assets/sass/app.scss`を作成して、読み込みませます。
同じフォルダのSCSSファイルをimportできるか試すため`variables.scss`と`common.scss`も同時に作成します。

`/assets/sass/app.scss`
```scss
// Variables
@import 'variables';

// common
@import 'common';
```

`/assets/sass/variables.scss`
```scss
$color-bg: rgb(248, 255, 187);
```

`/assets/sass/common.scss`
```scss
body {
    background-color: $color-bg;
}
```

背景色を変更するだけです。

### nuxt.config.jsの設定

`nuxt.config.js`にファイルのパスとSCSSであることを示せば勝手にやってくれます。
すごく簡潔だった。

`nuxt.config.js`
```js

  /*
  ** Global CSS
  */
  css: [
    { src: '~/assets/sass/app.scss', lang: 'scss' },
  ],
```

背景色が変わりました！
こちらもファイルを保存するだけで変更がすぐに反映されるため、スタイルをいじるのが楽しくなります。

![2](/images/posts/170/173/2.png)

共通のSCSSには`nuxt-sass-resources-loader`も必要かと思っていたが、`nuxt.config.js`への記述だけで済んだ。

参考：[Nuxt.jsでSassの変数を使えるようにして全ページで読み込むようにする](https://qiita.com/mimoe/items/890c4e681dac7c38322b)


Nuxt.jsのプロジェクトを作成してSCSSを導入するまで


**Nuxt 2.5.1**にアップデートしてから、`nuxt run dev`の実行時に表題のエラーが出たのでメモ。

## 環境

- Nuxt v2.5.1
- Node.js v11.12.0

## エラー内容

コンパイル中にfriendly-errorsが山ほど出た。

```sh
$ nuxt run dev 

(省略)

friendly-errors 01:38:28  ERROR  Failed to compile with 35 errors

friendly-errors 01:38:28 These dependencies were not found:
friendly-errors 01:38:28 
friendly-errors 01:38:28 * core-js/modules/es6.array.find in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.array.iterator in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.date.to-string in ./.nuxt/utils.js
friendly-errors 01:38:28 * core-js/modules/es6.function.name in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.object.assign in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.object.keys in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.object.to-string in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.promise in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.regexp.constructor in ./.nuxt/utils.js
friendly-errors 01:38:28 * core-js/modules/es6.regexp.match in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.regexp.replace in ./.nuxt/utils.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/common/ShareButtons.vue?vue&type=script&lang=js& and 1 other
friendly-errors 01:38:28 * core-js/modules/es6.regexp.search in ./.nuxt/utils.js
friendly-errors 01:38:28 * core-js/modules/es6.regexp.split in ./.nuxt/utils.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/SideBar.vue?vue&type=script&lang=js& and 2 others
friendly-errors 01:38:28 * core-js/modules/es6.regexp.to-string in ./.nuxt/utils.js
friendly-errors 01:38:28 * core-js/modules/es6.string.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other
friendly-errors 01:38:28 * core-js/modules/es6.string.iterator in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.string.repeat in ./.nuxt/utils.js
friendly-errors 01:38:28 * core-js/modules/es6.string.starts-with in ./.nuxt/utils.js
friendly-errors 01:38:28 * core-js/modules/es6.symbol in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
friendly-errors 01:38:28 * core-js/modules/es7.array.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other
friendly-errors 01:38:28 * core-js/modules/es7.promise.finally in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es7.symbol.async-iterator in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
friendly-errors 01:38:28 * core-js/modules/web.dom.iterable in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
friendly-errors 01:38:28 
friendly-errors 01:38:28 To install them, you can run: npm install --save core-js/modules/es6.array.find core-js/modules/es6.array.iterator core-js/modules/es6.date.to-string core-js/modules/es6.function.name core-js/modules/es6.object.assign core-js/modules/es6.object.keys core-js/modules/es6.object.to-string core-js/modules/es6.promise core-js/modules/es6.regexp.constructor core-js/modules/es6.regexp.match core-js/modules/es6.regexp.replace core-js/modules/es6.regexp.search core-js/modules/es6.regexp.split core-js/modules/es6.regexp.to-string core-js/modules/es6.string.includes core-js/modules/es6.string.iterator core-js/modules/es6.string.repeat core-js/modules/es6.string.starts-with core-js/modules/es6.symbol core-js/modules/es7.array.includes core-js/modules/es7.promise.finally core-js/modules/es7.symbol.async-iterator core-js/modules/web.dom.iterable
01:38:29 ℹ Waiting for file changes
```

最後の行に足りないパッケージをインストールするようにとあった。

```
$ npm install --save core-js/modules/es6.array.find core-js/modules/es6.ar...
```

実行したが解消しなかった。
また、$ yarn add core-js`も同様にダメだった。


## GitHubを確認

エラーを調べると[issues #3842](https://github.com/nuxt/nuxt.js/issues/3842)に報告済みであり、クローズしていた。
依存関係にバグがありcore-jsの依存関係が解消されなかったらしい。

## もう少しググる

解決策は（多分）無かったのでもう少しググり、中華サイトに行き当たった。
**segmentfault**という中華版Stack OverFlowみたいなサイト。

[解决liunx系统，项目nuxt2.0运行npm run dev / start报错问题](https://segmentfault.com/a/1190000018647030)

```sh
$ npm install --save core-js@latest2.6.2
```
最新版のcore-jsが必要そうなので、yarnで実行してみた。

```sh
$ yarn add core-js@latest2.6.2
yarn add v1.15.2
[1/4] Resolving packages...
Couldn't find any versions for "core-js" that matches "latest2.6.2"
? Please choose a version of "core-js" from this list: 2.6.5
```

**core-jsの最新版の2.6.5を選択してインストールして解消した！！！**

## おわりに

まとまっていないのは申し訳ない。
悩まれている方の助けに少しでもなりますように。

Nuxt2.5でのエラー：core-js/modules/es6.array.find in ./.nuxt/client.js

いくつかのSNSボタンを貼り付けようと思ったが、コピペで済む良さげなものがないため自分で作ってしまいました。

公式のものはスクリプトの読み込みで遅くなったり、デザインがバラバラなため見送った。
シェアできれば良いので、ブックマークやいいねの数は表示は不要。
（数値が上がると嬉しいため、今後表示できるようにするかもしれません）

いろいろと探していたら、作れる気がしたのでNuxt用に作ってみました！
Vue.jsでも少しの変更で導入できるかと思います。
早速この記事の上下にも配置してあります。

よろしければシェアおねがします<__>

## できたもの

![ボタン](/images/posts/52/snslink.png)

Twitter, はてなブックマーク, Pocketの３つを用意しました。

Google+は[2019年にサービスが終了](http://nlab.itmedia.co.jp/nl/articles/1810/09/news057.html)します。
facebookとLINEは今後追加して行きたいと思います。

デザインは大きめのボタン風にして、幅がレスポンシブに変化します。
このブログではBulmaをCSSフレームワークとして利用しているおり、アイコンはWebフォントの[Material Design Icons](https://materialdesignicons.com/)です。

利用していないものもありますが、アイコンの宣言を載せておきます。

```html

<i class="mdi mdi-twitter"/>

<i class="mdi mdi-facebook"/>

<i class="mdi mdi-google-plus"/>

<i class="mdi mdi-pocket"/>

<b>B!</b>

<b>LINE</b>
```

はてブとLINEはなかったので強調タグで囲みます。

## コード

`components/ShareButtons.vue`

一つのファイルにまとめてありますが、見やすくするため`template`, `script`, `style`に分けてあります。

**template**

```html
<template>
  <section class="section">
    <aside>
      <ul class="social-list">
        <li class="social-list-item">
          <a
            class="social-list-link icon-twitter"
            :href="twitterUrl()"
            target="_blank"
            title="Twitterで共有"
          ><i class="mdi mdi-twitter"/></a>
        </li>
        <li class="social-list-item">
          <a
            class="social-list-link icon-hatebu"
            :href="hatebuUrl()"
            target="_blank"
            :data-hatena-bookmark-title="encodeURIComponent(url)"
            title="このエントリーをはてなブックマークに追加"
          ><b>B!</b></a>
        </li>
        <li class="social-list-item">
          <a
            class="social-list-link icon-pocket"
            :href="pocketUrl()"
            target="_blank"
            title="pocketで共有"
          ><i class="mdi mdi-pocket"/></a>
        </li>
      </ul>
    </aside>
  </section>
</template>
```

**script**

```html
<script>
export default {
  name: "ShareButtons",
  props: ["title"],
  data() {
    return {
      url: `https://www.suzu6.net${this.$route.path}`,
      twitter_url: "https://twitter.com/intent/tweet?url={0}&text={1}",
      hatebu_url:
        "http://b.hatena.ne.jp/add?mode=confirm&amp;url={0}&amp;title={1}",
      pocket_url: "http://getpocket.com/edit?url={0}"
    };
  },
  methods: {
    formatByArr(msg) {
      // フォーマット（引数可変（配列）版）
      var args = [];
      for (var i = 1; i < arguments.length; i++) {
        args[i - 1] = arguments[i];
      }
      // URLエンコード
      args = args.map(x => encodeURIComponent(x));
      return msg.replace(/\{(\d+)\}/g, function(m, k) {
        return args[k];
      });
    },
    // それぞれパラメータを埋め込む
    twitterUrl() {
      return this.formatByArr(this.twitter_url, this.url, this.title);
    },
    hatebuUrl() {
      return this.formatByArr(this.hatebu_url, this.url, this.title);
    },
    pocketUrl() {
      return this.formatByArr(this.pocket_url, this.url);
    }
  }
};
</script>
```

**style**

```html
<style scoped>
.social-list {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  width: 100%;
  margin: auto;
  margin-bottom: 60px;
}

.social-list-item {
  height: 40px;
  line-height: 40px;
}
.social-list-item {
  flex-grow: 1;
  height: 50px;
  line-height: 50px;
  min-width: 90px;
  text-align: center;
}
.social-list-link.icon-twitter {
  background: #00b0ed;
}
.social-list-link.icon-hatebu {
  background: #008fde;
}
.social-list-link.icon-pocket {
  background: #eb4654;
}
/* .social-list-link.icon-line {
  background: #00c300;
} */
.social-list-link {
  display: block;
  color: #ffffff;
}
a {
  color: inherit;
  text-decoration: none;
}
.content li + li {
  margin-top: 0;
}
</style>

```

## 使い方

親コンポーネント

```html
<template>
  
  <share-buttons :title="title" />
</template>

<script>
import ShareButtons from "~/components/ShareButtons"

export default {
  components: {
    ShareButtons
  }
}
</script>
```

コンポートからimportしてShareButtonsを宣言する。
シェアボタンを設置したい位置に`<share-buttons>`を置く。

親から`v-bind`でtitleを渡してあげる。
ページのURLはShareButtonsの中で取得することができます。

他にも渡したいパラメータがある場合は、propsを拡張してください。


## SNSシェアボタンの公式スタイル

それぞれ、htmlにコピペできるコードをくれる。

- [はてなブックマーク](http://b.hatena.ne.jp/guide/bbutton)
- [Twitter](https://publish.twitter.com/?buttonType=TweetButton&widget=Button)
- [Pocket](https://getpocket.com/publisher/button)
- [Google+](https://developers.google.com/+/web/+1button/)
- [facebook](https://developers.facebook.com/docs/plugins/like-button/?locale=ja_JP)
- [LINE](https://social-plugins.line.me/ja/#lineitbutton)

ただ、スクリプトの読み込みで遅くなったり、デザインがバラバラなためカスタマイズすることを選んだ。

## 参考にしたサイトとメモ

> [Google+, Facebook, Twitter それぞれのシェアリンクを HTML a タグから直接作る方法 | yu8mada](https://yu8mada.com/2018/05/09/how-to-create-each-share-link-for-google-plus-facebook-and-twitter-directly-from-html-a-tag/)

サイトのデザインに合わせてSNSシェアボタンをカスタマイズできるように、リンクだけでシェアできる方法です。
どのようなURLを入れたら良いかまとまっている。
クエリパラメータの解説もあるのでとても参考になった。

URLエンコード用のJavaScriptのみでできるため、シェアの数を表示しない場合はこちらの方法にするとよい。

---

> [WebサイトにSNSシェアボタンを設置＆効果測定する方法のまとめ](https://qiita.com/imotoy/items/b7467d5cc869c69b6275)

SNSシェアボタンのためのメタタグやogpタグの実装例やGoogleアナリティクスと連携方法が載っている。
まだ、そこまでできていないので参考にして追加していきたい。

---

>  [文字列のフォーマット（String.Format的な処理）](https://st40.xyz/one-run/article/341/)

```javascript
// 引数を埋め込む関数
formatByArr("url={0}&text={1}", url, text) 
```

JavaScriptでこんな感じに、引数で渡したパラメータを埋め込んで文字列を返してくれる方法です。

---

> [Vue Router](https://router.vuejs.org/ja/guide/essentials/dynamic-matching.html#%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%83%BC%E5%A4%89%E6%9B%B4%E3%81%AE%E6%A4%9C%E7%9F%A5)

Vue.jsのドキュメント。子要素の中でも$route.path`で現在のURLパスが取得できるのは便利。

NuxtだけでなくVueも勉強しないとダメですね。

---

> [コピペで簡単!CSSだけで作るSNSボタンデザイン[サンプルコード付]](http://maerc.me/20161011/)

ボタンのデザインはこのページを参考にした。
ただし、コピペの方ではない。記事の前後にあるボタンを参考にしている。

（おそらく）WordPressのプラグインかテーマのもので、良いまとまり感がある。
アニメーションも取り入れたい。

---

> [JavaScript で title と meta description の値を取得する](http://sarchitect.net/10484)

Nuxtの静的サイトでは使えなかった。

## おわりに

ブックマークやいいね数の表示などリッチなことはできないが、URLだけでシェアボタンが機能することがわかった。
今回はNuxt用に作ったが、`JavaScript`と`Vue`用に軽いものを作っておきたい。

この下に今回制作したボタンがあるので、たくさん押して確かめてみて下さい^^


#### 書籍

Nuxtについての書籍はありますが、個人的には[公式のドキュメント](https://ja.nuxtjs.org/guide/)やGoogle先生頼りでいいかなと思います。
それよりも、[Vue](https://jp.vuejs.org/v2/guide/)についての理解を深めると捗りますね。

<div class="amakuri-default-comment" style="text-align: left; line-height: 1.5em; margin-bottom: 10px; overflow:hidden; _zoom:1;"><div class="amakuri-default-comment-image" style="float: left; margin: 0 20px 0 0;"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07GJM9ZRR/suzu60c-22" target="_blank"><img src="https://images-fe.ssl-images-amazon.com/images/I/41qh2YgbPbL._SL160_.jpg" width="113" height="160" alt="Hello!! Nuxt.js 〈Vue&amp;Nuxt〉 (技術書典シリーズ（NextPublishing）)" style="border: none"></a></div><div class="amakuri-default-comment-desc" style="overflow: hidden; _zoom:1;"><div class="amakuri-default-comment-title" style="margin-bottom: 0.5em;"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07GJM9ZRR/suzu60c-22" target="_blank">Hello!! Nuxt.js 〈Vue&amp;Nuxt〉 (技術書典シリーズ（NextPublishing）)</a></div><div class="amakuri-default-comment-posted" style="margin-bottom: 0.5em; font-size: small;">Posted at 2019.1.7</div><div class="amakuri-default-comment-author">那須 理也</div><div class="amakuri-default-comment-label" style="margin-bottom: 0.5em;">インプレスR&amp;D</div><div class="amakuri-default-comment-link" style="margin-top: 1em;"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07GJM9ZRR/suzu60c-22" target="_blank">Amazonで詳細を見る</a></div></div></div>

<div class="amakuri-default-comment" style="text-align: left; line-height: 1.5em; margin-bottom: 10px; overflow:hidden; _zoom:1;"><div class="amakuri-default-comment-image" style="float: left; margin: 0 20px 0 0;"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4297100916/suzu60c-22" target="_blank"><img src="https://images-fe.ssl-images-amazon.com/images/I/41qzgSLFQwL._SL160_.jpg" width="127" height="160" alt="Vue.js入門 基礎から実践アプリケーション開発まで" style="border: none"></a></div><div class="amakuri-default-comment-desc" style="overflow: hidden; _zoom:1;"><div class="amakuri-default-comment-title" style="margin-bottom: 0.5em;"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4297100916/suzu60c-22" target="_blank">Vue.js入門 基礎から実践アプリケーション開発まで</a></div><div class="amakuri-default-comment-posted" style="margin-bottom: 0.5em; font-size: small;">Posted at 2019.1.7</div><div class="amakuri-default-comment-author">川口 和也, 喜多 啓介, 野田 陽平, 手島 拓也, 片山 真也</div><div class="amakuri-default-comment-label" style="margin-bottom: 0.5em;">技術評論社</div><div class="amakuri-default-comment-link" style="margin-top: 1em;"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4297100916/suzu60c-22" target="_blank">Amazonで詳細を見る</a></div></div></div>

Nuxtで作ったサイトに軽いSNSシェアボタンを設置した

このブログをNetlify + Nuxtへ移行する時、`Google AdSense`も移しました。  
Adsenseの広告ユニットのコードを貼り付けていくと、似たコードが至る所にあり嫌なのでいい方法はないかと調べました。

Nuxtのためのモジュールが見つかったのでその使い方を解説していきます。

## @nuxtjs/google-adsense

[nuxt-community](https://github.com/nuxt-community)からGoogle AdSenseのためのモジュール[google-adsense-module](https://github.com/nuxt-community/google-adsense-module)が提供されているので、それを使います。

ライセンス形態は[MIT License](https://github.com/nuxt-community/google-adsense-module/blob/master/LICENSE)なので大丈夫ですね。

使い方は簡単です。
インストール後に`nuxt.config.js`へ記述して、挿入したいところに`<adsbygoogle/>`を追加するだけです。

以下、[GitHub](https://github.com/nuxt-community/google-adsense-module)を参考に解説していく。
尚、ドメインの取得やGoogle AdSenseへの登録と審査はすでに終えているものとします。

###  install

```sh
npm install --save @nuxtjs/google-adsense
```

`--save`でpackage.jsonに記録している。
このブログはNetlifyを使ってホスティングしているため必須。

## モジュールをnuxt.config.jsに記述する

nuxt.config.js

```js
{
  modules: [
    // Simple usage
    ['@nuxtjs/google-adsense', {
      id: 'ca-pub-###########'
    }]
 ]
}
```

`id`にAdSenseのidを記述する。

idはAdSenseのアカウント情報にある`サイト運営者 ID`です。
`####`はpub-から続く数字が入ります。先頭の`ca-`は必ずつけてください。

自動広告はデフォルトでオフになったいるため、使う場合は`pageLevelAds: true`を追加します。

## 広告を挿入する

広告の場所を指定するには、テンプレートの中に`<adsbygoogle/>`を追加します。

また、v-bindを使っていくつかのパラメータを渡せます。

```html
<template>
  
  <adsbygoogle />
  
  <adsbygoogle v-bind:ad-slot="'1234567890'" />
</template>
```

広告ユニットを指定する場合は、`ad-slot`に広告ユニットのIDを渡します。
この時、IDは数値ではなく文字列として渡してあげる必要があります。そのため、'シングルクォーテーション'などで囲ってください。

```html
<template>
  
  <adsbygoogle :ad-slot="'1234567890'" />
  
  <adsbygoogle :ad-slot="1234567890" />
  


  
  <adsbygoogle data-ad-slot="1234567890" />
</template>
```

はじめ`:ad-slot`でエラーが出るため`data-ad-slot="1234567890"`としていましたが、広告が表示されていました。
確証はありませんので、OKの方法を利用してください。

いくつかのpropの抜粋と雑解説。正確には[公式](https://github.com/nuxt-community/google-adsense-module)をみてください。

prop | type | description
:--: | :--: | :--:
ad-slot | String | 広告ユニットのID。文字列として渡す必要がある。
ad-format | String | レスポンシブ広告。デフォルトは'auto'。
ad-style | Object | `<ins>`のスタイルを指定する。デフォルトは{ display: 'block' }
ad-layout | String | レイアウトの設定。'in-article'など。

## おわりに

NuxtでAdSenseを利用する（おそらく）最適解が見つかってスッキリしました。

また、このブログのNetlify + Nuxtの構成もまとめていきたいです。

### 参考

- [google-adsense-module](https://github.com/nuxt-community/google-adsense-module)



#### 書籍

<div class="cstmreba"><div class="booklink-box"><div class="booklink-image"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F12855371%2F" target="_blank" ><img src="https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/0567/9784800710567.jpg?_ex=200x200" style="border: none;" /></a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"></div><div class="booklink-info"><div class="booklink-name"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F12855371%2F" target="_blank" >Google AdSense 成功の法則 57</a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"><div class="booklink-powered-date">posted with <a href="https://yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div></div><div class="booklink-detail">染谷昌利 ソーテック社 2014年07月    </div><div class="booklink-link2"><div class="shoplinkrakuten"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F12855371%2F" target="_blank" >楽天ブックス</a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"></div><div class="shoplinkamazon"><a href="https://www.amazon.co.jp/exec/obidos/asin/4800710561/suzu60c-22/" target="_blank" >Amazon</a></div><div class="shoplinkkindle"><a href="https://www.amazon.co.jp/gp/search?keywords=Google%20AdSense%20%90%AC%8C%F7%82%CC%96%40%91%A5%2057&__mk_ja_JP=%83J%83%5E%83J%83i&url=node%3D2275256051&tag=suzu60c-22" target="_blank" >Kindle</a></div>                              	  	  	  	  	</div></div><div class="booklink-footer"></div></div></div>

NuxtjsとMathJaxで数式エディタをつくってみる

Nuxt.jsのプロジェクトを作成してSCSSを導入するまで

Nuxt2.5でのエラー：core-js/modules/es6.array.find in ./.nuxt/client.js

Nuxtで作ったサイトに軽いSNSシェアボタンを設置した

Nuxtで作ったサイトにnpmでGoogle AdSenseを追加する