1Create Project
Open your terminal, navigate to the desired folder, and run the following commands.
# Create project
npm create vite@latest my-todo -- --template vue-ts
# Navigate to folder
cd my-todo
# Install dependencies
npm installReact vs Vue
Vue uses an HTML-like template syntax:
v-modelfor easy two-way bindingv-if,v-forfor intuitive conditionals/loops- Single File Component (.vue) combining HTML/CSS/JS
Term Tip: CLI / Dependencies
- CLI: Running project tools with terminal commands.
- npm: The package manager that installs and updates libraries.
- Dependency: An external library your app needs to run.
- Deep dive: Tools and terminal basics
2Install Tailwind CSS
Installing Tailwind CSS lets you create beautiful UIs using just classes.
# Install Tailwind
npm install -D tailwindcss postcss autoprefixer
# Generate config files
npx tailwindcss init -p
Open the tailwind.config.js file and modify it as follows:
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Open src/style.css and add the following at the top:
@tailwind base;
@tailwind components;
@tailwind utilities;3Run Dev Server
npm run dev
Open http://localhost:5173 in your browser to see the default Vite + Vue page.
If you see the Vue logo, the basic frontend setup is complete.
4Build UI with AI
Now let's ask AI to create a to-do management UI. Copy the prompt below and paste it into Antigravity or ChatGPT.
AI Prompt
복사해서 사용하세요
"Build a to-do management app with Vue 3 + TypeScript + Tailwind. Requirements: 1. Main layout in src/App.vue (header + content) 2. List UI showing to-do items 3. New to-do input form 4. Completion checkbox (toggle) 5. To-do delete button 6. Use ref() for local data management for now (we'll connect an API later) Styling: - Dark mode background (bg-gray-900) - Cards with bg-gray-800 - Completed items with strikethrough File structure: - src/App.vue - src/components/TodoForm.vue - src/components/TodoItem.vue - src/types/index.ts"
Send this prompt to your AI. If you're using Antigravity, press Cmd+L to open the agent panel.
Vue 3 Composition API
<script setup>syntax recommendedref()for reactive state managementv-modelfor input binding
5Expected Result
After applying the AI-generated code, you should see a screen like this:
To-Do List
The complete example code is available in the GitHub repository .