template including more features of nuxt

[Asxer]

Describe the feature

Now I see that for Nuxt3 there is a big change related to the state of the project after the init. Now the project is completely empty and I need to spend a lot of time adding needed features, googling templates of them, googling structure, coping, and pasting it many times. It makes the process of the init project on Nuxt really annoying and, honestly, I hate this change. I would prefer to press delete several times to remove redundant parts of code than doing all this job. If this will remain to be the default behavior maybe there is a way to initiate a project with the Nuxt application, not just one component and config? Maybe it could be implemented as a template of the project, maybe a console command to add features, idk what is the better way.

Additional information

• [X] Would you be willing to help implement this feature?
• [X] Could this feature be implemented as a module?

Final checks

• [X] Read the contribution guide.
• [X] Check existing discussions and issues.

[DamianGlowala]

Could you please list the set of time-saving features/functionality you would like to select and have scaffolded by the CLI whenever you create a new project? What are the things you had to google for, what did you have to copy and paste, which templates are you referring to? I believe it will help to understand your issue a bit better and see what possible improvements can be made in terms of the developer experience.

[Asxer]

I think the minimal stack is

1. Pages
2. Store
3. Components
4. Plugins
5. Middleware
6. Assets

I remember that in initializing Vue there was a dialog that asked me about which tech stack I prefer to use. Do I need a store? Do you need SASS, SCSS, CSS, LESS, etc? The same question about Typescript or JS. I understand that this feature is not a core feature for Nuxt but it would be a very helpful tool to the Nuxt ecosystem.

[pi0]

Initially we wanted to introduce a minimal experience for Nuxt 3 users and progressively use nuxi commands to add new files.

More thinking since we have more templates, it wouldn't be a bad idea to have an alternative template like nuxi init -t boilerplate to have Nuxt 2 style structure with all dirs initialized with a README pointing to the docs. /cc @Atinux WDYT?

[Asxer]

Initially we wanted to introduce a minimal experience for Nuxt 3 users

In practice, it is a VERY confusing experience.

use nuxi commands to add new files.

Where can I read about it?

[atinux]

It makes sense to have a default which is more explicit with Readmes in each directory 👍

We could rename our default template to "minimal" or "bare" so for experiences users they could run npx nuxi init -t bare (or even a shortcut like npx nuxi init --bare)

What do you think of the naming @danielroe ?

[danielroe]

I would be cautious before too quickly moving to a version of the starter with more unused directories or inline documentation (READMEs). In my experience, many users value the minimal approach. But that may just be my own preference for minimal, so I'd welcome feedback in both directions.

Other options include:

• pursuing IDE integration with the CLI to surface documentation
• providing an easily cut-and-pasteable npx nuxi init -t introduction in the docs so new users will default to using it - or offering a choice of templates when running npx nuxi init along the lines of sanity init which offers a range of projects to install, some including dummy data

[pi0]

I second that pursuing with minimal by default makes much more sense. We already planned with the same roadmap to integrate better with IDEs in order to show relevant documentation (devtools and studio) and also scaffold and modify project on demand.

In the meantime, i like introduction template name!

[mctweb]

I found that the original ‘all included’ approach of Nuxt2 was really valuable when starting out with the framework. It allowed for a quick and easy starter without having to read all of the documentation. Make the experience as simple as possible while onboarding developers to get them hooked into Nuxt – it worked on me!

[katerlouis]

I'm wondering why there is an "either...or..." here– I remember create-nuxt-app to be one the best things that Nuxt2 brought to the table (for me personally) – I've been looking this up since Nuxt3s RC phase: Why is there no talk about a init-wizard like create-nuxt-app? Static templates aren't a bad idea, but can't compete with the flexibility of the wizard.

So the question is: Whats up with create-nuxt-app? Why can't there be a clean nuxt-starter and a separate wizard project that lives besides nuxt-starter. I don't see any problem mentioning both methods in the "Get started" section.

I respect the need for folks to start blank – the issue with that is: Cutting down a "fully blown starter pack" will always be significantly faster than adding all the things you want by yourself. Heck, some might even not be able to do it.

I honestly struggled to get sass running and was pretty disappointed to see not a single mention on how to do this in the Nuxt3 docs. In the end it was as easy as $ npm i -D sass – Nuxt3 doesn't need a loader; nothing to do in the nuxt.config.ts or anything. Thats simple and cool. But how should new and less experienced users know this?

Having a wizard might annoy some while not having a wizard is ultimately exclusive and in my opinion a step backwards. How much percent each camp would be interesting to know.

What I know is; I'm heavily missing a wizard and hope it will return.

[atinux]

Thank you for your feedback @katerlouis

I do agree that we need to bring back a wizard for Nuxt 3. Let's add this to our roadmap.

[katerlouis]

Thank you for your feedback @katerlouis

I do agree that we need to bring back a wizard for Nuxt 3. Let's add this to our roadmap.

Yihaw! Hopefully it'll not end up launching mid 2024 :D

I'd like to contribute. Programmatically I'm probably not of much help. But conceptually I can share and brainstorm ideas. And I'm probably a good representation for developers with... lets say... less experience (and motivation to really learn?) for the whole infrastructure behind modern front-end apps; npm, node, setup sass, linting, lint-staged with git, webpack (or vite now <3) etc.

[atinux]

Happy to get help on this @katerlouis

If we create the introduction starter, how would it look like for you? You can share with me a Stackblitz or GH repo so we can move forward

[katerlouis]

@Atinux When I understand you correctly you ask my opinion on what I would like to see in a introduction template. While templates, like explained above, won't replace the flexibility and power of a wizard for me, I do see that templates already exist and could be a "good enough start" for guys like me, who miss the wizard.

I still haven't found the time to get all of my desired features to work in Nuxt3. So right now I can't provide a GH repo. I'll put some more priority on this during the week, if that helps you guys.

Until then, here's a list of my personal bare essentials:

• pages folder with <NuxtPage /> already present in app.vue (that one is bigger for rookies than you might think)
• components folder already present
• ESLint with opinionated starter config
• Husky and Lint-Staged
• Sass with styles folder
• StyleLint
• Pinia with stores folder
• srcDir: 'src/' in nuxt.config
• plugins folder already present

Here's a list of what I need often, but not all the time:

• Axios
• middleware folder already present
• Internationalization

I won't give up on a wizard, though, so here's just another idea: Maybe long term the wizard and templates could go hand in hand after all. Imagine nuxi init starting the wizard by default. The wizard provides all the togglable features step by step, like create-nuxt-app. Templates then serve as a predefined list of ticked and unticked features. When the user provides a -t myTemplate in the cli, the wizard gets skipped entirely. Users can save custom templates after the wizard is completed. -t minimal for instance skips the wizard and provides a blank project just like nuxi init does now.

I don't know how this would or could work under the hood, but here's to why I think this is a good idea conceptually: I assume only advanced users prefer a naked, minimalistic project. Since they are advanced its more likely they have the knowledge templates exist and know what -t minimal actually does. But who needs help the most in the beginning? People new to Nuxt3 (or Nuxt in general); people just checking it out for the first time and don't know about templates yet; people too lazy to install and configure everything themselves; people unable to install and configure (at least not propelrly); people who like to be guided by "good standards"–

EDIT: I would even go so far and say folders should be present by default all the time and can be opted out via the wizard.

EDIT2: All the folders and READMEs inspired with me confidence back 2 years ago when I started using Nuxt. I read a few things about it and couldn't quite grasp what it was. A framework upon a framework? Weird– So I just setup a quick project to check things out. I don't know if I would've stuck with Nuxt when the start project would've been completely empty.

[nekorrrr]

It's already 2024, is there any progress on this issue now?

As a user trying to get started with nuxtjs, I think this is still pretty important. @Atinux @katerlouis