Nuxt.js は Vue アプリケーションを作成するフレームワークです。ユニバーサルアプリケーション、静的に生成されるアプリケーション、シングルページアプリケーションの中から作成するアプリケーションを選ぶことができます。
サーバサイドとクライアントサイドのディストリビューションを抽象化しつつ UI レンダリングすることに焦点を当てています。
私たちのゴールは、メインプロジェクトの基礎として利用したり、既存の Node.js ベースのプロジェクトに追加したりできるような柔軟なフレームワークを作成することです。
Nuxt.js はサーバーサイドレンダリングをもっと楽しめるように Vue.js アプリケーションの開発に必要な設定をあらかじめプリセットしています。
加えて、nuxt generate と呼ばれる別の開発オプションも提供しています。これは静的に生成された Vue.js アプリケーションを構築します。 私たちはこのオプションが、マイクロサービスなウェブアプリケーションの開発において次なる大きな一歩になり得ると信じています。
さらに、Nuxt.js はシングルページアプリケーション(spa
モード)を手早く作成する際にも使えます。バックオフィスのアプリケーションとして動きつつ、Nuxt の機能を使うのに便利です。
フレームワークとして、Nuxt.js はクライアントサイドとサーバーサイド間の開発を手助けするたくさんの機能を備えています。例えば、非同期でのデータのやり取りや、ミドルウェアとしての利用、レイアウト機能などがあります。
Nuxt.js はリッチなウェブアプリケーションを構築するために下記のものを含んでいます:
mode: 'spa'
を利用している場合を除く)すべて合わせてもわずか 57kB min+gzip です。(Vuex 利用時は 60kB)
バンドルやソースコードの分割やミニファイ化するために内部で webpack、vue-loader と babel-loader を使います。
*.vue
)<head>
要素(<title>
、<meta>
など)の管理下の図は、サーバーサイドで処理が実行されたときや、ユーザーが <nuxt-link>
を通して遷移したときに Nuxt.js によって何が呼び出されるかを表しています:
Nuxt.js をプロジェクトの UI レンダリング全体を担うフレームワークとして使うことができます。
nuxt
コマンドを実行すると開発サーバーが起動します。このサーバーはホットリローディング及び Vue Server Renderer を備えており、アプリケーションが自動的にサーバーサイドレンダリングするよう設定されています。
もし何らかの理由でサーバーサイドレンダリングを使いたくない、あるいはアプリケーションを静的にホスティングする必要があるときは nuxt --spa
を使って、シンプルに SPA モードを使うことができます。generate 機能と組み合わせて使うことで、Node.js ランタイムや特別なサーバー処理を利用する必要なしに、SPA のパワフルなデプロイを実現できます。
コマンドについてより深く理解するには コマンド を参照してください。
既にサーバーがあるならば Nuxt.js をミドルウェアとして追加することができます。ユニバーサルなウェブアプリケーションの開発に Nuxt.js を利用する際、制限は何ひとつありません。 Nuxt.js をプログラム的に使う ガイドを参照してください。
nuxt generate
コマンドにより Nuxt.js に大きなイノベーションがやってきました。
アプリケーションをビルドする際、ルートやストアにあるファイル全てに対し HTML を生成します。
例えば、以下のファイル構成だった場合:
-| pages/
----| about.vue
----| index.vue
次のファイルが生成されます:
-| dist/
----| about/
------| index.html
----| index.html
この方法により、生成されたウェブアプリケーションをどの静的ウェブサイトホスティングにもホストできます!
最も良い例はこのウェブサイト自体です。このサイトは Netlify で生成されホストされています。ソースコードもしくは Vue School の Nuxt.js を Netlify にデプロイする方法を参照してください。
docs repository をアップデートするたびに手動でアプリケーションを生成したくないので、Netlify のフックへのトリガーにします:
npm install
で依存関係のあるパッケージをインストールするnpm run generate
を実行するdist
ディレクトリに配置するこれで自動化された静的に生成されたウェブアプリケーションができます。:)
さらに nuxt generate
で生成、CDN でホストされた E コマースのウェブアプリケーションを考えてみましょう。このアプリケーションは商品が在庫切れもしくは再入荷されるたびに再生成されます。ユーザーがアプリケーションを遷移している間に、在庫の状態が(再生成のおかげで)最新になるのです。もはや、サーバーで複数のインスタンスやキャッシュを持つ必要はないのです!
Netlify へデプロイする方法についての詳細は Netlify へデプロイするには? を参照してください。
間違いを見つけた、またはドキュメントに貢献したいですか? GitHub でこのページを編集する