vite-plugin-create is a Vite plugin and CLI tool for quickly generating components, stores, pages, and other entities. The plugin helps speed up development by utilizing customizable templates.

Tired of repetitive boilerplate? vite-plugin-create is a powerful yet simple Vite plugin and CLI tool designed to save you hours by automating component, page, store, and custom entity generation — fully customizable and scalable for any project size.

• Highly flexible and extensible — create your own generators and templates tailored to your workflow.
• Designed for rapid development and zero-copy-paste productivity boost.
• Generate components, pages, stores, or any custom entity using templates.
• Create your own generators in vite-create.config.json.
• Supports file naming styles: PascalCase, camelCase, kebab-case, original.
• Choose between TypeScript or JavaScript on init.
• Automatically creates configuration and templates via vite-create init.

npm install vite-plugin-create --save-dev

or

yarn add vite-plugin-create --dev

Initializes configuration and templates. You’ll be asked:

• Do you want to use TypeScript?

Based on your choice, the correct config and template files will be added to your project.

Creates the entity with the given name using the matching generator in config.

Example:

npx vite-create component Button
npx vite-create page Home
npx vite-create custom myThing

templates/
  component/
    component.tsx / .jsx
    style.scss
    index.ts / .js
    test.tsx / .jsx
  page/
    page.tsx / .jsx
    index.ts / .js
    style.scss
  store/
    zustand.ts / .js
vite-create.config.json

Example config:

{
  "defaultPath": "src",
  "templateVars": {
    "useTypeScript": true,
    "fileNameStyle": "pascalCase"
  },
  "generators": {
    "component": {
      "path": "components/{{name}}",
      "fileNameStyle": "pascalCase",
      "files": {
        "{{name}}.tsx": "templates/component/component.tsx",
        "{{name}}.module.scss": "templates/component/style.scss",
        "index.ts": "templates/component/index.ts"
      }
    },
    "page": {
      "path": "pages/{{name}}",
      "fileNameStyle": "kebab-case",
      "files": {
        "{{name}}.tsx": "templates/page/page.tsx",
        "{{name}}.module.scss": "templates/page/style.scss",
        "index.ts": "templates/page/index.ts"
      }
    },
    "store": {
      "path": "stores/{{name}}",
      "fileNameStyle": "camelCase",
      "files": {
        "{{name}}.ts": "templates/store/zustand.ts"
      }
    }
  }
}

• Add any custom generator by extending the generators field.
• Template files can use Handlebars placeholders: {{name}}, {{PascalCaseName}}, etc.

You can define and use any generator by name:

"generators": {
  "custom": {
    "path": "customs/{{name}}",
    "files": {
      "{{name}}.ts": "templates/custom/index.ts"
    }
  }
}

Then run:

npx vite-create custom MyUtility

You can create generators with **any** name you want — not just "custom".  
Simply add your generator config with a unique name in `vite-create.config.json` and create matching templates.  
Then run `npx vite-create your-generator-name <entityName>`.

---

## 🛣 Roadmap

- ✅ Custom generators
- ✅ TypeScript / JavaScript toggle via init prompt
- ✅ Naming styles per generator
- ✅ File extensions mapped automatically (.ts/.tsx/.js/.jsx)
- 📁 Directory-based template support
- 🧰 Future: simple GUI configurator (in CLI or browser)
- 🌐 Future: official website with full documentation and interactive playground

---

## 🔧 Dependencies

- `commander`
- `fs-extra`
- `handlebars`
- `inquirer`
- `typescript`

---

## Contributing & Community

`vite-plugin-create` is 100% open source and thrives thanks to an active community. Your ideas, feedback, and pull requests are always welcome — let’s build the best developer experience together!

## 📜 License

MIT — [opensource.org/licenses/MIT](https://opensource.org/licenses/MIT)