dfinity · raymondk · May 20, 2026 · May 20, 2026 · May 20, 2026 · May 20, 2026
@@ -1,7 +1,7 @@
 [placeholders]
 backend_type = { type = "string", prompt = "What's your backend weapon of choice?", choices = ["motoko", "rust"], default = "motoko" }
 # We're only supporting react at the moment, so this variable is not really used
-frontend_type = { type = "string", prompt = "Pick a frontend framework:", choices = ["react"], default = "react" }
+frontend_type = { type = "string", prompt = "Pick a frontend framework:", choices = ["react", "vue"], default = "react" }
 network_type = { type = "string", prompt = "Use the default network or a dockerized one?", choices = ["Default", "Docker"], default = "Default" }
 
 [conditional.'backend_type == "rust"']
@@ -10,6 +10,12 @@ ignore = [ "motoko-backend" ]
 [conditional.'backend_type == "motoko"']
 ignore = [ "rust-backend" ]
 
+[conditional.'frontend_type == "react"']
+ignore = [ "vue-frontend" ]
+
+[conditional.'frontend_type == "vue"']
+ignore = [ "react-frontend" ]
+
 [hooks]
-pre = ["rename-backend-dir.rhai"]
+pre = ["rename-dirs.rhai"]
 post = ["../_shared/write-agent-files.rhai"]
@@ -5,12 +5,12 @@
   <meta charset="UTF-8" />
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>ICP Frontend Environment Variables</title>
+  <title>Hello World</title>
 </head>
 
 <body>
   <div id="root"></div>
   <script type="module" src="/src/main.tsx"></script>
 </body>
 
-</html>
+</html>
@@ -5,8 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "generate": "icp-bindgen --did-file ../../backend/backend.did --out-dir ./src/backend/api --force",
-    "build": "tsc -b && vite build",
+    "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },
@@ -17,7 +16,7 @@
   },
   "devDependencies": {
     "@eslint/js": "~9.33.0",
-    "@icp-sdk/bindgen": "~0.3.0",
+    "@icp-sdk/bindgen": "^0.4.0",
     "@types/react": "~19.1.10",
     "@types/react-dom": "~19.1.7",
     "@vitejs/plugin-react": "~5.0.0",

@@ -99,6 +99,11 @@
   gap: 12px;
 }
 
+.brand-framework {
+  width: 40px;
+  height: 40px;
+}
+
 .brand-vite {
   width: 40px;
   height: 40px;

@@ -43,9 +43,11 @@ function App() {
         <div className="brand" aria-label="ICP plus Vite">
           <img src="/icp.svg" alt="ICP logo" className="brand-icp" />
           <span className="plus">+</span>
+          <img src="/react.svg" alt="React logo" className="brand-framework" />
+          <span className="plus">+</span>
           <img src="/vite.svg" alt="Vite logo" className="brand-vite" />
         </div>
-        <h1 className="title">Frontend Environment Variables</h1>
+        <h1 className="title">Hello World</h1>
         <p className="subtitle">
           Call the backend canister and get a greeting.
         </p>

@@ -10,9 +10,5 @@ recipe:
       # Install the dependencies
       # Eventually you might want to use `npm ci` to lock your dependencies
       - npm install
-      # Generate the bindings from backend.did file in the backend canister
-      # You could choose to run this once manually and checkin the generated code
-      # instead of running it every single time
-      - npm run generate --prefix app
       - npm run build
     dir: app/dist
@@ -1,4 +1,5 @@
 // This script just renames the `<language>-backend` directory to `backend`
+// and renames the `<framework>-frontend` directory to `frontend`
 // By the time this script is called the conditionals would have filtered
 // all the unselected backend folders
 
@@ -13,3 +14,14 @@ switch backend_type {
     file::rename("motoko-backend", "backend");
   }
 }
+
+let frontend_type = variable::get("frontend_type");
+debug(`frontend_type: ${frontend_type}`);
+switch frontend_type {
+  "react" => {
+    file::rename("react-frontend", "frontend");
+  }
+  "vue" => {
+    file::rename("vue-frontend", "frontend");
+  }
+}
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
@@ -0,0 +1,14 @@
+# yaml-language-server: $schema=https://github.com/dfinity/icp-cli/raw/refs/tags/v0.1.0/docs/schemas/canister-yaml-schema.json
+
+name: frontend
+
+recipe:
+  # https://github.com/dfinity/icp-cli-recipes/blob/main/recipes/asset-canister/README.md
+  type: "@dfinity/asset-canister@v2.1.0"
+  configuration:
+    build:
+      # Install the dependencies
+      # Eventually you might want to use `npm ci` to lock your dependencies
+      - npm install
+      - npm run build
+    dir: dist
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Hello World</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script src="/src/main.js" type="module"></script>
+</body>
+
+</html>
@@ -0,0 +1,21 @@
+{
+  "name": "MotokoVue_frontend",
+  "version": "0.0.0",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@icp-sdk/core": "^5.4.0",
+    "pinia": "^3.0.4",
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@icp-sdk/bindgen": "^0.4.0",
+    "@vitejs/plugin-vue": "~6.0.7",
+    "@vue/tsconfig": "^0.9.1",
+    "sass-embedded": "^1.99.0",
+    "vite": "~7.1.11"
+  }
+}