Nuxt.js

Nuxt.js

【Nuxt.js】extractCSSを設定してCSSを外部ファイルに抽出する

はじめに この記事ではNuxt.jsで使用するcssを外部ファイルに抽出するための設定方法を紹介します。 extractCSSを設定する Nuxt.jsではデフォルトではextractCSSがfalseに設定されています。 そのため、...
Nuxt.js

【Nuxt】PM2を使って本番環境でNuxtアプリケーションを実行する

はじめに この記事ではPM2を使って、本番環境でNuxtアプリケーションの実行する方法を紹介します。 PM2をインストール PM2はNode.jsのプロセスマネージャーで、Node.jsのアプリケーションを動作させるために使用します。...
Nuxt.js

【Nuxt.js/Vue Router】nuxt-linkにv-on:clickを設定する方法

はじめに この記事では、Nuxt.jsの「」にv-on:clickを設定する方法を紹介します。 click.nativeを使用する nuxt-linkにクリックイベントを設定するときは、clickだと反応しない。click.nativ...
Nuxt.js

【Nuxt】JSやCSS、Webフォントなどの外部リソースを全てのページで使用する

はじめに この記事では、Nuxt.jsでCDNで配布されているJSやCSS、webフォントなどの外部リソースを使用するための設定方法について紹介します。 外部リソースのインクルード リソースをグローバルにインクルードする アプリケー...
Nuxt.js

【Nuxt.js】nuxt.config.jsで.envで定義した環境変数を取得して使用する

はじめに この記事ではNuxt.jsのnuxt.config.js内で.envファイルで定義した環境変数を使用する方法を紹介します。 dotenvモジュールをインストールする .envを読み込むためにnuxt-communityが公開...
Nuxt.js

【Nuxt】テンプレートでassetsとstatic配下のリソースを参照するときの書き方

はじめに この記事ではNuxt.jsの「assets」ディレクトリと「static」ディレクトリの使い分けと、ディレクトリに配置したファイルの参照方法について紹介します。 assetsとstaticディレクトリの使い分け Nuxtでは...
Nuxt.js

【Nuxt】nuxt-linkで遷移するときに画面の一番上にスクロールする

この記事では「nuxt-link」を使って画面遷移した際に、画面の一番上にスクロールさせる方法を紹介します。 「nuxt-link」で画面の一番上にスクロールさせる 「nuxt-link」はデフォルトだと、画面遷移したときにスクロール位...
Nuxt.js

【Nuxt.js】axiosのインストール方法と使い方を、プロジェクトの作成から解説

Nuxt.jsにaxiosを導入する方法とその使い方を、プロジェクトを作成するところから解説します。 こんにちは、aiiro(@aiiro29)です。 この記事は、次のような方に向けた内容となっています。 「nuxt-communit...
Nuxt.js

【Nuxt.js】axiosとproxy-moduleを使って、リクエストをプロキシする方法

この記事では、nuxt-communityが提供している、"proxy-module"と"axios"を組み合わせて、サーバに送信するリクエストをプロキシする方法を紹介しています。 Nuxt.jsに"axios"をインストールする方法は、...