DEV Community

Cover image for What’s New in vite-plugin-create v1.0.1 — Or How I Took Another Step Toward the Perfect Generator
Dmitry Titov
Dmitry Titov

Posted on

What’s New in vite-plugin-create v1.0.1 — Or How I Took Another Step Toward the Perfect Generator

#webdev #opensource #vite #react

🔥 Highlights of v1.0.1

After releasing the first version of the plugin, I decided not to wait — and jumped straight into building out the roadmap.

The new version of vite-plugin-create isn’t just about bug fixes. It’s a big leap toward full customization. Now you decide what you want to generate, how to name it, and what templates to use — all in a simple, intuitive way.

🧱 Custom Generators

You can now define your own generators in the config:

"store": {
  "path": "stores/{{name}}",
  "files": {
    "{{name}}.ts": "templates/store/zustand.ts"
  }
}
Enter fullscreen mode Exit fullscreen mode

Want to scaffold Zustand stores? Redux slices? A new kind of widget? Go for it.

🧠 Smarter init

The npx vite-create init command now asks:

TypeScript or JavaScript?

And generates a config and template set that fits your stack. No extra files. No cleanup needed. Just your setup — ready to go.

🧩 JSX / JS Support

Working on a pure JavaScript project? No problem. Templates will now match your choice:
•.jsx instead of .tsx
•index.js instead of index.ts

Everything just works.

🎨 Per-Generator Naming Styles

Want your components in PascalCase, but your stores in camelCase? Easy.

You can now configure the file naming style for each generator separately:

"generators": {
  "component": {
    "path": "components/{{name}}",
    "fileNameStyle": "pascalCase",
    "files": {
      "{{name}}.tsx": "templates/component/component.tsx",
      "index.ts": "templates/component/index.ts",
      "{{name}}.module.scss": "templates/component/style.scss"
    }
  },
  "store": {
    "path": "stores/{{name}}",
    "fileNameStyle": "camelCase",
    "files": {
      "{{name}}.ts": "templates/store/zustand.ts"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

🛠 How It Works

Still dead simple:

npx vite-create init
npx vite-create component MyButton
npx vite-create store userStore
npx vite-create custom whatever
Enter fullscreen mode Exit fullscreen mode

All templates live in the templates/ directory and support Handlebars variables like {{name}}, {{PascalCaseName}}, and so on.

🌱 What’s Next

Here’s where we’re headed:
•🧩 A visual UI to generate and edit your config
•🧪 A playground site with live docs and preview
•🛠️ CLI wizard for adding new generators without manually editing JSON

Conclusion

Plop.js is a powerful tool. We drew inspiration from it. But vite-plugin-create is about simplicity. About zero-config onboarding. About getting up and running with your own templates, your own generators, and working commands — in under a minute.

If you’re tired of boilerplate and want more control with less effort — give vite-plugin-create a spin.

I’d love to hear your feedback and ideas. I read everything.

And hey — see you in the terminal.

📦 GitHub
📥 vite-plugin-create on npm
📝 Original article: How I built a code generator for Vite

Top comments (0)