NuxtでVueを快適にする

NuxtでVueを快適にする Yumemi.vue #4 初心者登壇枠

自己紹介名前　中島　駿介年齢　23 性別　男性経験年数　8ヶ月趣味ゲーム・たまに勉強経歴詳細

アジェンダ • 経緯 • Nuxt.jsとは • NuxtはVue.js単体で使った場合と何が違うのか？ • まとめ

経緯 Vue.js 公式ライブラリの導入と扱いに煩わしさを感じた。容易に扱える環境を整えたいと考えた時に行きついた先がNuxt.jsです

Nuxtとは？ SSR！

Nuxtとは Nuxt.js公式参照 Nuxt は、Vue の公式ガイドラインに沿って強力なアーキテクチャを提供するように設計されたフレームワークです。 Vue.js環境を快適にしたいと考えているなら推奨フレームワーク

何が違うのか？

ルーティング Nuxtではpagesディレクトリ内の Vue ファイルの木構造に沿って、自動的に vue-router の設定を生成します。自分で設定する必要がない記述忘れの心配がなく、また容易に
pageのpathを変更する事ができます。 vue-routerで行える事はほとんど再現可能です pages/ --| test/ -----| index.vue <--path "test/" -----| one.vue <--path "test/one" --| index.vue <--path "/"

状態を管理（Vuex） Nuxt.js は store ディレクトリを探索し存在するときには以下を実行します • Vuex をインポート •
store オプションをルートの Vue インスタンスに追加

２つのモードどちらか好みのほうを選んで使ってください（ほぼ選択肢はない） • モジュールモード： store ディレクトリ内のすべての *.js ファイルが名前空間付きモジュール
に変換されます（index はルートモジュールとして存在します） • クラシックモード (廃止予定)：廃止されるので説明不要

シンプル stateを関数としmutations、actions、gettersをオブジェクトとしてシンプルにエクスポートします。オプションでモジュールファイルを state.js、 actions.js、 mutations.js、getters.js といった別々のファイルに分離することができます。 /**
index.js */ export const state = () => ({ counter: 0 }) export const mutations = { increment (state) { state.counter++ }}

結論 Nuxtを導入する事でコードがすごくシンプルになり、Vueそのもののハードルも下がります。

あとがき今回の記事ではVue単体では面倒な設定の記述をNuxtでは書く必要なく、改修時などに変更する箇所も減り、より快適にVueをコーディングできることを理解してもらえるように２つの違いから解説していきました。 NuxtはSSR(サーバーサイドレンダリング)を行うためだけではなくVue開発そのものを快適にしてくれるフレームワークである事を理解してもらえたら幸いです。

ご清聴ありがとうございました

NuxtでVueを快適にする

NuxtでVueを快適にする

Grimmalice

Other Decks in Programming

Featured

Transcript