Nuxt.jsで学ぶ、Vue.jsコンポーネント設計の基本 - Qiita

はじめに Nuxt.js(以下Nuxt)は、Vue.js(以下Vue)をサーバーサイドで動かす目的以外にも、ディレクトリ構造やVueエコシステムのライブラリがセットになっているため、設計の工数を削減する目的で採用するケースもあると思います！ お中元に迷ったときのヨックモックみたいですね😊 本記事では、Nuxtのディレクトリ構造を土台とし、Vueのコンポーネント設計について、各レイヤー（ディレクトリ）のコンポーネントが担うべき責務をまとめました。 Vue3.0がやってくると、Composition API 導入に伴い設計のベストプラクティスが変化すると思いますが、Vue2系を触ってきた個人的な総括の気持ちで書いています。 Vueコンポーネントの基本とNuxtでの例 Vueコンポーネントは下記図のように、ツリー状にネストし構築されていきます。 ※Vue.js公式サイト コンポーネントによる構