mintsu's blog

Nuxt.js

Nuxt.jsを利用してMarkdownで記述可能なブログを自前で作成しました。作成する際に使ったライブラリprocessmdや、ブログを作った際の仕組みについて紹介します。

Nuxt.jsの環境でGoogle Analyticsを導入する方法について紹介します。 Google Analyticsを導入すると各ページ毎のPV等アクセス解析できるため、サイト改善を行うためにはかなり有用なツールとなります。ぜひ導入してみてください。

Nuxt.jsでサイトマップを作成する方法を記載します。サイトマップを作成することでGoogleなどの検索エンジンが効率よくクロールができるようになります。Nuxt.jsでは動的なルーティングも定義することがありますが、その際はサイトマップを作成するときに少し工夫する必要があります。

Nuxt.jsを利用してmarkdown-itを利用する方法を記載します。以前@nuxtjs/markdownitを利用する方法は書きましたが、今回はpluginとして記述する方法について記載します。

Vue アプリケーションの状態管理ライブラリであるVuexを理解しながら使ってみます。 Vuex は Flux, Redux の影響のを受けています。 Fluxについても理解をしながらVuexについて理解していこうと思います。

Nuxt.jsの環境でGoogle Adsenseを導入する方法について紹介します。 Nuxt.jsだとSPAのサイトだったりするので、その場合Google Adsenseのコードをどう貼ればいいのか、正しく動くのか不安になります。nuxt-community から google-adsense-module というものが利用できるので、そちらを利用することで細かいことを考えずにGoogle Adsenseを導入できます。

Nuxt.js でコンポーントの作成方法について記載します。 ブログなどで、人気ランキングモジュールや、関連記事モジュールなど、複数のページで共通の情報を表示する場合があります。そういった場合にコンポーネントとして切り出しておくことで、共通化することができます。

Nuxt.js の環境で外部のWebAPIを利用する方法について紹介します。 Webサービスを作っていると、外部のAPIと連携してサービスを作ることが多いと思います。 Nuxt.jsでは をnuxt-community から axios-module を導入することでかんたんに axiosというHTTPクライアントを導入することができます。

Nuxt.jsで開発していると、ローカル開発環境で確認の為に、ビルドを走らせるかと思います。しかし、Nuxt.js のビルドは割と時間かかりますよね。 HardSourceWebpackPluginを利用することで Nuxt.js のビルド時間を大幅に削減することができます。 今回は HardSourceWebpackPlugin の導入方法について紹介します。

Nuxt.jsなどSPAでTwitterのシェアボタンやツイート表示のウィジェットを利用する際、ページ遷移時にうまく表示されない場合があるのでその対処法について記載します。widgets.jsの読み込みのタイミングですので任意のタイミングで読み込むようにします。

VirtualBoxを使ってゲストOSでNuxtのアプリケーションを起動して、ホストからブラウザで参照する際に外部アクセス可能なIPを指定してNuxtのアプリケーションを起動する必要があります。その設定方法について記載します。

Nuxt.js でページ遷移時のアニメーション(トランジション)を設定する方法について記載します。 Nuxt.js では page に対し Vue の transition の設定がデフォルトでされています。 CSS を使って transition の設定を記載するだけで簡単にページ遷移時のアニメーションを実現することができます。今回はこのブログにも実際に適用しているCSSの設定例を記載します。