Add support for other frontend frameworks (specifically Vue)

[proofoftom]

Is your feature request related to a problem? Please describe. There's a ton of benefit to having predefined templates with respective ABIs but I'd like to develop my frontend with frameworks other than React, specifically Vue.

Describe the solution you'd like When running create-eth-app one should have the ability to choose their frontend framework (perhaps by a --framework flag) which would use the respective framework's CLI to generate the project.

[PaulRBerg]

This would indeed be cool! A similar idea has been proposed with #9.

I would keep all of them as templates though, even if the frontend framework is different. The hard thing in implementing this is figuring out how to reuse the ABIs and the addresses in the source code, so that the same blobs of code can be reused throughout multiple templates. That is, only one "compound" folder should be kept in version control, but multiple templates should be able to access it.

[proofoftom]

Glad you're already thinking about this!

To start, would it make sense to add the vue-app next to react-app in each template's folder? Then down the road I'm thinking the frontend framework specific components could be abstracted from the app implementations and kept in the template folder and are imported in the app based upon which template/framework you choose (maybe initially this is just overwriting the App.js with the template/framework specific one). One step further, framework agnostic functions could be abstracted into utils that are imported by both framework implementations. That way the amount stored in the template folder is minimal and reusable.

[proofoftom]

As a side note, with the additional optionality being added such as templates and frameworks, it'd probably make sense to utilize inquirer for a better choice making UX.

[PaulRBerg]

To start, would it make sense to add the vue-app next to react-app in each template's folder?

This would be the most straightforward way, although I guess it may confuse some users to have two frontend frameworks in the default template.

The frontend framework specific components could be abstracted from the app implementations and kept in the template folder and are imported in the app based upon which template/framework you choose

Yes! I reckon handlebars could help here. See sablier-subgraph for how we made good use of handlebars to avoid keeping network-specific yaml files into version control.

It'd probably make sense to utilize inquirer for a better choice making UX.

I'm already using prompts, which does its job well. Does inquirer have any major advantages?

const res: prompts.Answers<string> = await prompts({
  initial: "my-app",
  message: "What is your project named?",
  name: "path",
  type: "text",
  validate: (name: string) => {
    const validation: { valid: boolean; problems?: string[] } = validateNpmName(path.basename(path.resolve(name)));
    if (validation.valid) {
      return true;
    }
    return "Invalid project name: " + validation.problems![0];
  },
});

[PaulRBerg]

Closing since this has been implemented in #23. Looking forward to add more UI frameworks as the community requests them.