Generate components in sub-folders in ember/ember-cli

Ok, I think this question/answer needs a bit of an update for 2019. I have been using Ember for all of about a month, and my components folder has already become a pigpen. And the tutorial and main API docs don't really cover how to organize your components.

So I did a search of course. And the only answers I could find (like this one) are from around 2014-2015, and don't reflect modern Ember. I was about to accept my fate when I found this in the Ember syntax conversion guide. (Note to the Ember folks: This is an important issue, one that almost every new user will encounter. It should feature a bit more prominently in the documentation. Maybe not the tutorial, but definitely in Components section)

You can in fact generate components under a sub-folder in Ember as such:

$ ember generate component foo/bar-baz
installing component
  create app/components/foo/bar-baz.js
  create app/templates/components/foo/bar-baz.hbs
installing component-test
  create tests/integration/components/foo/bar-baz-test.js

So that's great, the files are created under components/foo and templates/components/foo. And to resolve the name of the component for use in another template, you can use either the old style syntax:

{{foo/bar-baz }}

Or the new style angle bracket syntax:

<Foo::BarBaz />

Ok, so I had the same problem and as of ember 1.9-beta.3 (that's the version I tested). It is possible to have components nested under resource directories.

That means that you can have a "user" route or resource. And let's say you have a component which you only want to use with the user resource, so you want to put the component under the resource directory.

The way to do it is to put the component under the resource directory app/pods/user/component-name/template.hbs. The important part is to remember that components must have a dash in their name. It can't be just .../user/component it has to be .../user/component-name with a dash. Then you can use the component as {{user/component-name}} in your templates.

Also I think this is only possible when you're using the pod structure.