Nuxt+Vuetifyでテンプレートを利用したスタートアップを行う

はじめに

javascriptでフロントエンドを作るというと、最初が非常に面倒臭いイメージがございます。フォルダを掘って、ファイルを配置して、Webpackのコンフィグを書いて、といった必ず発生する諸作業です。

これを一括して面倒を見てくれるのが、世の中に出回っているスタートアップ用のテンプレートでございます。Nuxtもまたnuxt-communityとvuetifyjsの協力から、便利なテンプレートが提供されております。

実装

インストール方法は以下の通りです。yarnのバージョンはプロジェクト毎に管理しておきたいので、インストールはglobalでなくlocalとします。そして、同じディレクトリにvuetifyjs/nuxtのテンプレートを展開するよう、initに引数を渡します。

$ mkdir PROJECT_NAME
$ cd PROJECT_NAME
$ yarn init
$ yarn add vue-cli
$ yarn vue init vuetifyjs/nuxt ../PROJECT_NAME
$ yarn install
$ yarn run dev

これにより必要なパッケージのインストールも含めて、全てが完了です。最後のコマンドによってサーバーが立ち上がります。ブラウザでアクセスすると、以下のような形でVuetifyによって綺麗にデザインされたNuxtの画面を確認することができます。

ちなみにリモート上で開発している場合は、外部からの参照を許可する為に、package.jsonに以下の通りポートとアクセスの許可を指定する必要があります。

"config": { "nuxt": { "host": "0.0.0.0", "port": "3000" } }