The components folder consists of three subfolders (/base, /compounds and /debug) following a custom "atomic" approach. The /debug folder is just for debug components and should not contain anything relevant for production. All other components are devided into two main categories, base and compounds.

Why a custom atomic approach?

Vue.js has the idea of components in its core, so it makes sense to break down a design into small, reusable parts. Strict "Atomic Design" structuring is often to granular for our daily use cases and the naming might be confusing in a Nuxt.js context. Therefore a custom approach was chosen.

Components directory

nuxt-starter/
    /components/
        /base/
            /common/
            /forms/
        /compounds/
            /accessibility/
            /content/
            /layout/
            /site/
            /ui/
        /debug/

---