Merge pull request #7 from Comfy-Org/vue-template

add vue template

Author: christian-byrne

.gitmodules

@@ -1,3 +1,7 @@
 [submodule "{{cookiecutter.project_slug}}/react-extension-template"]
 	path = {{cookiecutter.project_slug}}/react-extension-template
 	url = https://github.com/Comfy-Org/ComfyUI-React-Extension-Template
+
+[submodule "{{cookiecutter.project_slug}}/vue-basic-template"]
+	path = {{cookiecutter.project_slug}}/vue-basic-template
+	url = https://github.com/jtydhr88/ComfyUI_frontend_vue_basic

cookiecutter.json

@@ -2,19 +2,20 @@
   "full_name": "",
   "email": "you@gmail.com",
   "github_username": "your_github_username",
-  "frontend_type": ["no", "react", "js"],
+  "frontend_type": ["no", "react", "vue", "js"],
   "project_name": "My Custom Nodepack",
   "project_slug": "{{ cookiecutter.project_name.lower().replace(' ', '_').replace('-', '_').replace('comfyui_', '').replace('comfy_', '') }}",
   "project_short_description": "A collection of custom nodes for ComfyUI",
   "version": "0.0.1",
   "open_source_license": ["GNU General Public License v3", "MIT license", "BSD license", "ISC license", "Apache Software License 2.0", "Not open source"],
   "__gh_slug": "{{ cookiecutter.github_username }}/{{ cookiecutter.project_slug }}",
-  "_copy_without_render": ["*.tsx", "*.ts", "*.yml"],
+  "_copy_without_render": ["*.tsx", "*.ts", "*.yml", "*.vue", "*.mts"],
     "__prompts__": {
       "frontend_type": {
       "__prompt__": "Do you want to write frontend components?",
       "no": "No",
       "react": "Yes, using React",
+      "vue": "Yes, using Vue (requires ComfyUI Frontend 1.24.3+)",
       "js": "Yes, my own way"
       }
     }

hooks/post_gen_project.py

@@ -64,6 +64,10 @@ def setup_project_structure():
             shutil.rmtree("react-extension-template")
             print("✓ Removed react-extension-template directory")
 
+        if Pth("vue-basic-template").exists():
+            shutil.rmtree("vue-basic-template")
+            print("✓ Removed vue-basic-template directory")
+
     elif frontend_type == "react":
         if Pth("react-extension-template").exists():
             print("✓ Found react-extension-template directory")
@@ -102,14 +106,47 @@ def setup_project_structure():
             shutil.rmtree("custom-nodes-template")
             print("✓ Removed custom-nodes-template directory")
 
+    elif frontend_type == "vue":
+        if Pth("vue-basic-template").exists():
+            print("✓ Found vue-basic-template directory")
+            for item in Pth("vue-basic-template").iterdir():
+                # Skip git-related files when copying from react template
+                if item.name in [".git", ".gitmodules", ".gitignore"]:
+                    continue
+
+                target = Pth(item.name)
+                if item.is_file():
+                    shutil.copy2(item, target)
+                    print(f"✓ Copied file: {item} -> {target}")
+                else:
+                    if target.exists():
+                        shutil.rmtree(target)
+                    shutil.copytree(item, target, ignore=shutil.ignore_patterns('.git', '.gitmodules', ".gitignore"))
+                    print(f"✓ Copied directory: {item} -> {target}")
+
+            files_to_replace = [
+                "README.md",
+            ]
+
+            replacements = {
+                "ComfyUI Frontend Vue Basic": "{{cookiecutter.project_name}}",
+                "MIT License": "{{cookiecutter.open_source_license}}",
+            }
+
+            replace_text_in_files(files_to_replace, replacements)
+
+        if Pth("custom-nodes-template").exists():
+            shutil.rmtree("custom-nodes-template")
+            print("✓ Removed custom-nodes-template directory")
+
     if Pth("common").exists():
         print("✓ Found common directory")
         for item in Pth("common").iterdir():
             if item.is_file():
                 shutil.copy2(item, ".")
                 print(f"✓ Copied common file: {item}")
 
-    for template_dir in ["common", "custom-nodes-template", "react-extension-template"]:
+    for template_dir in ["common", "custom-nodes-template", "react-extension-template", "vue-basic-template"]:
         if Pth(template_dir).exists():
             shutil.rmtree(template_dir)
             print(f"✓ Cleaned up: {template_dir}")

hooks/pre_gen_project.py

@@ -61,7 +61,7 @@ def validate_project_name():
     template_source = "{{ cookiecutter._template }}"
     frontend_type = "{{cookiecutter.frontend_type}}"
 
-    if template_source.startswith("gh:") and frontend_type == "react":
+    if template_source.startswith("gh:") and (frontend_type == "react" or frontend_type == "vue"):
         submodule_success = init_submodules()
 
         if not submodule_success:

{{cookiecutter.project_slug}}/common/pyproject.toml

@@ -41,6 +41,10 @@ Icon = ""
 includes = ["dist/"]
 {%- endif %}
 
+{% if cookiecutter.frontend_type == 'vue' -%}
+includes = ["js"]
+{%- endif %}
+
 [tool.setuptools.package-data]
 "*" = ["*.*"]