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

去年の年末に知ってた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をインストールします。

  
npm install -g vue-cli
  

nuxt/starter をインストール

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

  
vue init nuxt/starter 
cd 
npm install
  

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

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

  
npm run dev
  

起動を確認

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

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

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

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

触ってみて

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

Author

札幌でフロントエンドエンジニアとして働いています。好きな音楽はSIAM SHADE!
SIAM SHADEの六人目のメンバーとして日々ロックを愛し続けている。
HTML,CSS,JavaScriptをベースにCMS構築が得意です。
HAMWORKS社員 https://ham.works