Web開発をより身近に!Nuxt.jsの始め方

Web

Nuxt.jsとは?

Nuxt.jsは、Vue.jsによるWebアプリケーション開発のためのフレームワークになります。

Nuxt.jsの強力な点の1つとしてルーティングの容易さがあります。VueでルーティングするためにはVue Routerを用い、コンテキストパスとコンポーネントを紐付けるための設定をする必要があります。

routes: [
  {
    path: '/',         
    component: Index,   
    name: 'index',    
  },
  {
    path: '/about',            
    component: About,
    name: 'about',
  },
]

Vue Routerをまだ知らないよという方はこちらの記事を参考にしてください。

【Vue.js】vue-routerの基礎をサンプルを用いて解説
vue-routerを用いることでURLにより表示するコンポーネントを制御することができます。Vue.jsでシングルページアプリケーションの構築する場合には必須といっていいほど利用されています。そんなvue-routerをサンプルを元に解説していきます。

これをNuxt.jsで実装するには、プロジェクト内のpagesディレクトリ内に「index.vue」と「about.vue」を作成するだけです。

Nuxt.jsでは、pagesディレクトリに配備されたvueファイルを自動でルーティングしてくれます。そのため自身でVue Routerの設定をする必要はありません。

このようにNuxt.jsでは、Vue.jsによるアプリケーションをより簡単に、より高速に開発するための機能が多く備わっています。

詳しい機能についてはまた別の記事で紹介したいと思います。この記事ではNuxt.jsの第一歩としてプロジェクトの作成方法について紹介していきます。

プロジェクトの作成方法

Nuxt.jsのプロジェクトを作成するためには、「create-nuxt-app」を使用します。

$npx create-nuxt-app <project-name>
$yarn create-nuxt-app <project-name>

プロジェクトを作成される前にいくつか質問されます。バージョンによって内容が異なります。ここでは「v2.8.0」を使用しています。

? Project name (<project-name>)
? Project description (My terrific Nuxt.js project)
? Author name (<your name>)
? Choose the package manager (Use arrow keys)
> Yarn
  Npm
? 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
? Choose rendering mode (Use arrow keys)
> Universal (SSR)
  Single Page App
  • Choose the package manager

パッケージ管理ツールとして「Yarn」か「Npm」を選択します。ここはお好みで構いません。

  • Choose UI framework

CSSフレームワークやコンポーネントフレームワークを選択します。コンポーネントフレームワークとは、あらかじめコンポーネントなどがいくつか用意されており、それらを使ってページを構成していくことができます。個人的に有名だと思うのはVuetifyやbootstrapだと思いますが、ここは好みで選択してください。

  • Choose custom server framework

Nuxt.jsプロジェクト内でサーバーサイドの開発を同時に行う場合に、対象のサーバーフレームワークを指定します。expressと組み合わせるものをたまにみますが、個人的には外部のサービスなどを利用することがほとんどのため「none」を選択しています。

  • Choose Nuxt.js modules

Nuxt.jsに関連するモジュールをインストールするか選択します。axiosを使用する場合は、インスタンスプロパティとして「$axios」が設定されます。PWAについてはここでは割愛しますが、PWA用の設定がnuxt.config.jsに記述されます。

  • Choose linting tools

コードをきれいに保つためのツールとして「Eslint」と「Prettier」を使用するか選択します。

  • Choose test framework

テスト用のフレームワークを選択します。

  • Choose rendering mode

レンダリングの方法として「Universal」と「Single Page App」を選択します。サーバーサイドレンダリングが不要な場合は「Single Page App」を選択します。

選択が終わるとインストールが始まり、プロジェクトディレクトリが作成されます。わからない場合はすべてデフォルトでも大丈夫です。必要な場合は後からインストールすることも可能です。

Sassの導入

Sassを導入する場合は次をインストールします。

$npm install --save sass-loader node-sass

Pugの導入

Pugを導入する場合は次をインストールします。

$npm install --save pug pug-loader pug-plain-loader

プロジェクトの起動方法

プロジェクトディレクトリに移動し、次のコマンドを実行します。

$npm run dev
$yarn run dev

デフォルトでは3000ポートが使用されているので、「http://localhost:3000」にアクセスします。次のようなページが表示されればOKです。

ポート番号を変更したい場合は、package.jsonの「scripts.dev」を次のように変更します。

"scripts": {
  "dev": "nuxt --port <port number>"
}

ディレクトリ構造

Nuxt.jsプロジェクトでは、次のようなディレクトリ・ファイルが存在します。ますは「assets」、「components」、「layouts」、「pages」の役割を覚えましょう。

assets

assetsディレクトリには、スタイルシート(css、scss、sass、stylusなど)や画像ファイルを配備します。

components

componentsディレクトリには、コンポーネントとして作成したVueファイルを配備します。pagesとlayouts以外のVueファイルはここに配備するイメージです。

layouts

layoutsディレクトリには、ページの共通的なレイアウトを定義したVueファイルを配備します。デフォルトではすべてのページは「default.vue」を共通的なレイアウトとして使用しています。レイアウトはページ毎に指定することができます。

middleware

middlewareディレクトリには、ページがレンダリングされるよりも前に実行したい処理を記述したjsファイルを配備します。使用する場合は、nuxt.config.jsに設定が必要になります。

pages

pagesディレクトリには、ページを構成するVueファイルを配備します。冒頭にも説明したように、配備されたVueファイルから自動でルーティングが行われます。またページ用のVueファイルでは特有のプロパティを持ちます。

plugins

pluginsディレクトリには、コンポーネント、関数、定数などをVueインスタンスに設定するためのjsファイルを配備しまう。プラグインを使用する場合は、nuxt.config.jsに設定が必要になります。

static

staticディレクトリには、faviconなどサーバーのルートに配備する必要のあるファイルを配備します。

nuxt.config.js

Nuxt.jsの設定情報を記述します。

rootDirとsrcDir

プロジェクト内のファイルを参照する場合は、チルダ(~)やアットマーク(@)を使用します。

例えばassets/img/image1.pngを参照する場合は次のようにします。

~/assets/img/image1.png
@/assets/img/image1.png

このような参照の方法には2種類「rootDir」と「srcDir」があります。

srcDir:  ~ or @
rootDir: ~~ or @@

デフォルトの場合は「rootDir」と「srcDir」は同じプロジェクトディレクトリのルートを意味します。「srcDir」は、nuxt.config.jsで次のように変更することが可能です。

module.exports = {
  mode: 'universal',
  srcDir: 'app',

  //-- 略 --
}

仮にこのようにする場合は、appディレクトリを作成して上記で説明したディレクトリを移動する必要があります。

Nuxt.jsを使ったブログの作成

Nuxt.jsを使った1つの例として以前作成したブログを紹介します。実際に作成したブログがこちらです。

b1san Tech Blog
管理人が日々学んだことをメモするためのブログです。主にVue.jsやNuxt.jsなどフロントエンドの技術について気まぐれに投稿しています。

ブログ作成に関することはこちらに記載していますのでご興味ある方は御覧ください。

Nuxt.js + Contentful + Netlify でマイブログを公開したお話 - Qiita
※2019/6/6 追記 PWA設定 ※2019/7/5 追記 ドメイン設定 「Nuxt.jsって便利だなー。でも何作ろう…。ブログかな…。でもどうやって…??」 検索「Nuxt ブログ」 ⇒ 「Nuxt.js + Conte...

 

- Nuxt.jsのおすすめ書籍はコチラ -

コメント

タイトルとURLをコピーしました