app_vue_code = (
    "<template>\n"
    "  <div class=\"min-h-screen flex flex-col items-center justify-center bg-gray-900\">\n"
    "    <h1 class=\"text-3xl font-bold text-blue-400 mb-6\">Vue 3 + Tailwind + Three.js</h1>\n"
    "    <ThreeCanvas />\n"
    "  </div>\n"
    "</template>\n\n"
    "<script setup>\n"
    "import ThreeCanvas from './components/ThreeCanvas.vue'\n"
    "</script>\n"
)

# ThreeCanvas.vue boilerplate
three_canvas_code = (
    "<template>\n"
    "  <div ref=\"container\" class=\"w-full h-[400px] bg-black rounded-lg shadow-lg\"></div>\n"
    "</template>\n\n"
    "<script setup>\n"
    "import { onMounted, ref } from 'vue'\n"
    "import * as THREE from 'three'\n\n"
    "const container = ref(null)\n\n"
    "onMounted(() => {\n"
    "  const scene = new THREE.Scene()\n"
    "  scene.background = new THREE.Color(0x222222)\n\n"
    "  const camera = new THREE.PerspectiveCamera(75, container.value.clientWidth / container.value.clientHeight, 0.1, 1000)\n"
    "  camera.position.z = 2\n\n"
    "  const renderer = new THREE.WebGLRenderer({ antialias: true })\n"
    "  renderer.setSize(container.value.clientWidth, container.value.clientHeight)\n"
    "  container.value.appendChild(renderer.domElement)\n\n"
    "  // Add a spinning cube\n"
    "  const geometry = new THREE.BoxGeometry()\n"
    "  const material = new THREE.MeshStandardMaterial({ color: 0x42a5f5 })\n"
    "  const cube = new THREE.Mesh(geometry, material)\n"
    "  scene.add(cube)\n\n"
    "  // Add light\n"
    "  const light = new THREE.DirectionalLight(0xffffff, 1)\n"
    "  light.position.set(5, 5, 5)\n"
    "  scene.add(light)\n\n"
    "  function animate() {\n"
    "    requestAnimationFrame(animate)\n"
    "    cube.rotation.x += 0.01\n"
    "    cube.rotation.y += 0.01\n"
    "    renderer.render(scene, camera)\n"
    "  }\n"
    "  animate()\n"
    "})\n"
    "</script>\n"
)