CLI Scaffolding progress

[pi0]

One of the new features of nuxi cli, is the ability to scaffold templates for common components such as pages, plugins, etc.

Thanks to the nice initiative from @Baroshem (via nuxt/framework#3841) we have the functionality to try with nuxi add 💚 (docs: https://v3.nuxtjs.org/docs/usage/cli/#add)

This issue is to track the roadmap of this feature.

Feature roadmap:

• nuxi add (#3841)
• entity management shortcuts (nuxi pages add <name>) (#3903)
• CLI API service (pending devtools project)
• Template util from unjs (@pi0)
• External template support (ideas welcome)

Templates:

• component
• composable
• layout
• middlware
• page
• plugin
• api
• app
• error
• config
• nuxtignore
• tsconfig
• serverMiddleware
• tests/

Feedbacks are more than welcome!

[baixiaoyu2997]

bridge can use this ?
when i code yarn nuxi add page help, i have error :

 ERROR  Cannot use 'in' operator to search for 'color' in false                                                                              09:44:11

  at getValue (node_modules/untyped/dist/chunks/utils.mjs:43:15)
  at _resolveSchema (node_modules/untyped/dist/index.mjs:23:25)
  at _resolveSchema (node_modules/untyped/dist/index.mjs:39:32)
  at _resolveSchema (node_modules/untyped/dist/index.mjs:39:32)
  at resolveSchema (node_modules/untyped/dist/index.mjs:5:18)
  at applyDefaults (node_modules/untyped/dist/index.mjs:66:3)
  at Module.loadNuxtConfig (node_modules/@nuxt/kit/dist/index.mjs:629:10)
  at async Object.invoke (node_modules/nuxi/dist/chunks/add.mjs:121:20)
  at async _main (node_modules/nuxi/dist/cli.mjs:46:7)

Nuxt project info: 09:46:18

---

• Operating System: Darwin
• Node Version: v16.14.0
• Nuxt Version: 2.16.0-27358576.777a4b7f
• Package Manager: yarn@1.22.18
• Builder: webpack
• User Config: build, bridge, buildModules, ssr, target, meta, css, plugins, components, loading
• Runtime Modules: -
• Build Modules: @nuxt/bridge@3.0.0-27470397.9ebea90, @nuxt/bridge@3.0.0-27470397.9ebea90, @nuxt/bridge@3.0.0-27470397.9ebea90, @vueuse/nuxt@8.2.0, @pinia/nuxt@0.1.8, @nuxtjs/eslint-module@3.0.2, @nuxtjs/stylelint-module@4.1.0, @nuxt/bridge@3.0.0-27470397.9ebea90

---

[lazaroofarrill]

Any possibility of extending the cli with external templates. I'd like to add the name property to created components so they are correctly resolved by Webstorm. I don't know if it be useful enough given most people use vscode but it would help me a lot passing a custom template instead of having to maintain my own version of the cli.

[lazaroofarrill]

Any possibility of extending the cli with external templates. I'd like to add the name property to created components so they are correctly resolved by Webstorm. I don't know if it be useful enough given most people use vscode but it would help me a lot passing a custom template instead of having to maintain my own version of the cli.

Well just realized it is in the roadmap, I'll try to come up with something.

[metasean]

I love the nuxi approach to automating file creation!

I can see several ways to accomplish the following, including custom templates, a cli flag, project-wide configuration, etc. but regardless of implementation details, I'd really love to see the ability to automatically create a unit/integration test file for the newly generated components, middleware, pages, plugins, etc. E.g. when running nuxi add component helloWorld it would generate both the ./components/HelloWorld.vue file and ./tests/HelloWorld.test.js file with all the boilerplate in place to test the HelloWorld component.

I believe that such a feature is very consistent with the goal of nuxi. Between vue test-utils and the new nuxt test-utils it seems like a (relatively) low-hanging approach to encourage and support testing.

Unfortunately, other commitments have limited the time I have to explore Nuxt 3, but the little bit that I have seen, has me super excited.

[anoack93]

I love the idea to have a CLI tool for scaffolding components, as we missed that feature in nuxt we have created a similar tool which is currently specialized on ui component creation (it does not support plugins etc.).

npm: create-frontend-component

It has a slightly different approach compared to nuxi as the templates can be fully customized and also multiple files can be added (eg. unit tests, storybook files). It as is easy as creating and editing files in a dedicated directory. Other than that you can create multiple template types (called flavours) if you need multiple variants in your project. In the CLI you can then choose the type (eg. atoms, molecules, organism) reflecting your directory structure and the flavour.

Maybe it can serve as a bit of inspiration for nuxi add.