Nuxt.jsを試しに使ってみた

Posted on:2017-05-20

去年の年末に知ってたNuxt.jsを使ってみたいと思ったので、チュートリアルも兼ねて試しに検証をしてみました。
公式のドキュメントもしっかりしていて、ありがたいですね。

Nuxt.jsとは?

Nuxt.jsは、Vue.jsのアプリケーションのフレームワークになります。

Nuxt.js とはユニバーサルな Vue.js アプリケーションを構築するためのフレームワークです。
クライアントサイド用のディストリビューションと、サーバーサイド用のディストリビューションとを分離して生成している間に行う UI レンダリング に焦点を当てています。

Vue.jsを本格的に使っていくには、Webpack・Babelの設定などを自前で用意しなければなりませんが、
Nuxt.jsにはスターターキットというテンプレートが用意されているので、手軽にインストール始めることができます。

公式から

  • Vue ファイルで記述できること
  • コードを自動的に分割すること
  • サーバーサイドレンダリング
  • 非同期データをハンドリングするパワフルなルーティング
  • 静的ファイルの配信
  • ES6/ES7 のトランスパイレーション
  • JS と CSS のバンドル及びミニファイ
  • Head 要素の管理
  • 開発モードにおけるホットリローディング
  • SASS, LESS, Stylus などのプリプロセッサのサポート

手軽に始めれるということだったので、試しにインストールしてルーティングしてみました。

インストール

今回は、Vue-cliを使って、スターターキットをインストールしてみます。
もちろん公式にはスクラッチから始めることも記載されています。

vue-chilをインストール

npm or yarnでグローバルにvue-cliをインストールします。

bash
npm install -g vue-cli

nuxt/starter をインストール

vueコマンドが使えるようになったら、スターターキットをインストールします。

bash
vue init nuxt/starter <project-name>
cd <project-name>
npm install

プロジェクトを起動してみる

npm run devでローカルサーバが立ち上がります。(http://localhost:3000

bash
npm run dev

起動を確認

以下がコマンドを一覧になります。

bash
# nuxt コマンドを実行
npm run dev

# nuxt build コマンドを実行
npm run build

# nuxt start コマンドを実行
npm run start

# nuxt generate コマンドを実行
npm run generate

テンプレートを触ってみる

pages内にある.vueファイルがアプリケーションのルーターを作成します。

触ってみて

SSRにも対応しているということで、かなり使いやすい印象でした。
もう少し、触ってみて詳細を追記していきたいと思います。