{"id":2864,"date":"2025-11-05T06:12:10","date_gmt":"2025-11-05T06:12:10","guid":{"rendered":"https:\/\/200oksolutions.com\/blog\/?p=2864"},"modified":"2025-12-04T07:44:01","modified_gmt":"2025-12-04T07:44:01","slug":"build-a-todo-app-laravel-api-vue-3-vite","status":"publish","type":"post","link":"https:\/\/www.200oksolutions.com\/blog\/build-a-todo-app-laravel-api-vue-3-vite\/","title":{"rendered":"Build a Todo App \u2014 Laravel API + Vue 3 (Vite)"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/200oksolutions.com\/blog\/wp-content\/uploads\/2025\/11\/Build-Your-1-1024x576.png\" alt=\"Build a Todo App using Laravel API and Vue 3 (Vite) \u2014 step-by-step tutorial by 200OK Solutions for developers to create a full-stack CRUD application.\" class=\"wp-image-2866\" srcset=\"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2025\/11\/Build-Your-1-1024x576.png 1024w, https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2025\/11\/Build-Your-1-300x169.png 300w, https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2025\/11\/Build-Your-1-768x432.png 768w, https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2025\/11\/Build-Your-1-1536x864.png 1536w, https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2025\/11\/Build-Your-1-2048x1152.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Build a simple but complete Todo CRUD application using Laravel as a JSON API and Vue 3 (Vite) as the frontend SPA \u2014 using modern Vue features (&lt;script setup&gt;), Pinia for state, and Axios for API calls. This tutorial is aimed at developers who want a practical, production-ready starter.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Prerequisites<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Node.js 16+ (Node 18+ recommended)<\/li>\n\n\n\n<li>npm or pnpm or yarn (we\u2019ll use npm in commands)<\/li>\n\n\n\n<li>PHP 8.1+<\/li>\n\n\n\n<li>Composer<\/li>\n\n\n\n<li>MySQL (or other DB) and basic knowledge of creating databases<\/li>\n\n\n\n<li>Optional: XAMPP \/ Valet \/ Docker \u2014 any local PHP environment that can run Laravel.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>1: Project layout &amp; approach<\/strong><\/h2>\n\n\n\n<p>We\u2019ll create two projects in sibling folders:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>workspace\/\n\n\u251c\u2500 todo-api\/ # Laravel backend (API)\n\n\u2514\u2500 todo-vue\/ # Vue 3 frontend (Vite)<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>2: Create Laravel API (todo-api)<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2.1 Create project<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>composer create-project laravel\/laravel todo-api\n\ncd todo-api\n\nphp artisan key:generate<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2.2 Configure database<\/strong><\/h3>\n\n\n\n<p>Open .env and set DB credentials:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>DB_CONNECTION=mysql\n\nDB_HOST=127.0.0.1\n\nDB_PORT=3306\n\nDB_DATABASE=todo_api\n\nDB_USERNAME=root\n\nDB_PASSWORD=your_password<\/code><\/pre>\n\n\n\n<p>Create the todo_api database in MySQL<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2.3 Create model &amp; migration<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>php artisan make:model Task -m<\/code><\/pre>\n\n\n\n<p>Edit the generated migration (database\/migrations\/xxxx_xx_xx_create_tasks_table.php):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Schema::create('tasks', function (Blueprint $table) {\n\n$table->id();\n\n$table->string('title');\n\n$table->text('description')->nullable();\n\n$table->boolean('completed')->default(false);\n\n$table->timestamps();\n\n});\n\nphp artisan migrate<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2.4 Add fillable to model<\/strong><\/h3>\n\n\n\n<p>app\/Models\/Task.php:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n\nnamespace App\\Models;\n\nuse Illuminate\\Database\\Eloquent\\Model;\n\nclass Task extends Model\n\n{\n\nprotected $fillable = &#91;'title', 'description', 'completed'];\n\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2.5 Create API controller<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>php artisan make:controller Api\/TaskController --api<\/code><\/pre>\n\n\n\n<p>Replace<strong> app\/Http\/Controllers\/Api\/TaskController.php <\/strong>with:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n\nnamespace App\\Http\\Controllers\\Api;\n\nuse App\\Http\\Controllers\\Controller;\n\nuse App\\Models\\Task;\n\nuse Illuminate\\Http\\Request;\n\nclass TaskController extends Controller\n\n{\n\npublic function index()\n\n{\n\nreturn Task::latest()->get();\n\n}\n\npublic function store(Request $request)\n\n{\n\n$data = $request->validate(&#91;\n\n'title' => 'required|string|max:255',\n\n'description' => 'nullable|string'\n\n]);\n\n$task = Task::create($data);\n\nreturn response()->json($task, 201);\n\n}\n\npublic function show(Task $task)\n\n{\n\nreturn $task;\n\n}\n\npublic function update(Request $request, Task $task)\n\n{\n\n$data = $request->validate(&#91;\n\n'title' => 'required|string|max:255',\n\n'description' => 'nullable|string',\n\n'completed' => 'boolean'\n\n]);\n\n$task->update($data);\n\nreturn $task;\n\n}\n\npublic function destroy(Task $task)\n\n{\n\n$task->delete();\n\nreturn response()->noContent();\n\n}\n\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2.6 API routes<\/strong><\/h3>\n\n\n\n<p>In routes\/api.php:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>use App\\Http\\Controllers\\Api\\TaskController;\n\nRoute::apiResource('tasks', TaskController::class);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2.7 Allow cross-origin requests (CORS) for local dev<\/strong><\/h3>\n\n\n\n<p>Laravel includes CORS config in config\/cors.php. For simple local dev, set:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>'paths' => &#91;'api\/*'],\n\n'allowed_origins' => &#91;'http:\/\/localhost:5173'], \/\/ Vue dev server\n\n'allowed_methods' => &#91;'*'],\n\n'allowed_headers' => &#91;'*'],<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2.8 Run Laravel server<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>php artisan serve --port=8000<\/code><\/pre>\n\n\n\n<p>API base URL: http:\/\/&lt;host>:&lt;port>\/api\/tasks<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>3: Create Vue 3 SPA with Vite (todo-vue)<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3.1 Create project<\/strong><\/h3>\n\n\n\n<p>From same parent folder:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm create vite@latest todo-vue -- --template vue\n\ncd todo-vue\n\nnpm install<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3.2 Install dependencies<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install axios pinia<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3.3 Project structure (essential files)<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>todo-vue\/\n\u251c\u2500 index.html\n\u251c\u2500 package.json\n\u2514\u2500 src\/\n   \u251c\u2500 main.js\n   \u251c\u2500 App.vue\n   \u251c\u2500 stores\/\n   \u2502  \u2514\u2500 useTasks.js\n   \u2514\u2500 components\/\n      \u251c\u2500 TaskForm.vue\n      \u2514\u2500 TaskList.vue\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3.4 src\/main.js<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>import { createApp } from 'vue'\n\nimport { createPinia } from 'pinia'\n\nimport App from '.\/App.vue'\n\nimport '.\/style.css' \/\/ optional\n\nconst app = createApp(App)\n\napp.use(createPinia())\n\napp.mount('#app')<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3.5 src\/stores\/useTasks.js (Pinia store)<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>import { defineStore } from 'pinia'\n\nimport axios from 'axios'\n\nconst api = axios.create({\n\nbaseURL: 'http:\/\/127.0.0.1:8000\/api',\n\n\/\/ timeout: 5000\n\n})\n\nexport const useTasks = defineStore('tasks', {\n\nstate: () => ({\n\nlist: &#91;],\n\nloading: false\n\n}),\n\nactions: {\n\nasync fetch() {\n\nthis.loading = true\n\ntry {\n\nconst res = await api.get('\/tasks')\n\nthis.list = res.data\n\n} finally {\n\nthis.loading = false\n\n}\n\n},\n\nasync add(payload) {\n\nconst res = await api.post('\/tasks', payload)\n\nthis.list.unshift(res.data)\n\n},\n\nasync updateTask(task) {\n\nconst res = await api.put(`\/tasks\/${task.id}`, task)\n\nconst idx = this.list.findIndex(t => t.id === task.id)\n\nif (idx !== -1) this.list&#91;idx] = res.data\n\n},\n\nasync remove(id) {\n\nawait api.delete(`\/tasks\/${id}`)\n\nthis.list = this.list.filter(t => t.id !== id)\n\n}\n\n}\n\n})<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3.6 src\/components\/TaskForm.vue<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;template>\n\n&lt;form @submit.prevent=\"handleSubmit\" class=\"task-form\">\n\n&lt;input\n\nv-model=\"title\"\n\ntype=\"text\"\n\nplaceholder=\"Enter task title\"\n\nrequired\n\nclass=\"input\"\n\n\/>\n\n&lt;textarea\n\nv-model=\"description\"\n\nplaceholder=\"Enter description\"\n\nclass=\"textarea\"\n\n>&lt;\/textarea>\n\n&lt;button type=\"submit\" class=\"btn\">Add Task&lt;\/button>\n\n&lt;\/form>\n\n&lt;\/template>\n\n&lt;script setup>\n\nimport { ref } from 'vue'\n\nimport { useTasks } from '..\/stores\/useTasks'\n\nconst store = useTasks()\n\nconst title = ref('')\n\nconst description = ref('')\n\nconst handleSubmit = async () => {\n\nif (!title.value) return\n\nawait store.add({ title: title.value, description: description.value })\n\ntitle.value = ''\n\ndescription.value = ''\n\n}\n\n&lt;\/script>\n\n&lt;style scoped>\n\n.task-form {\n\ndisplay: flex;\n\nflex-direction: column;\n\ngap: 8px;\n\nmargin-bottom: 1rem;\n\n}\n\n.input, .textarea {\n\npadding: 8px;\n\nborder-radius: 5px;\n\nborder: 1px solid #ccc;\n\n}\n\n.btn {\n\npadding: 8px 12px;\n\nborder: none;\n\nborder-radius: 5px;\n\nbackground: #42b883;\n\ncolor: white;\n\ncursor: pointer;\n\n}\n\n.btn:hover {\n\nbackground: #2c8a66;\n\n}\n\n&lt;\/style><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3.7 src\/components\/TaskList.vue<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;template>\n\n&lt;ul>\n\n&lt;li v-for=\"task in store.list\" :key=\"task.id\">\n\n&lt;label>\n\n&lt;input type=\"checkbox\" v-model=\"task.completed\" @change=\"toggle(task)\" \/>\n\n&lt;span :class=\"{ done: task.completed }\">{{ task.title }}&lt;\/span>\n\n&lt;\/label>\n\n&lt;button @click=\"remove(task.id)\">\u274c&lt;\/button>\n\n&lt;\/li>\n\n&lt;\/ul>\n\n&lt;\/template>\n\n&lt;script setup>\n\nimport { useTasks } from '..\/stores\/useTasks'\n\nconst store = useTasks()\n\nconst toggle = async (task) => {\n\nawait store.updateTask(task)\n\n}\n\nconst remove = async (id) => {\n\nawait store.remove(id)\n\n}\n\n&lt;\/script>\n\n&lt;style scoped>\n\nul {\n\nlist-style: none;\n\npadding: 0;\n\n}\n\nli {\n\ndisplay: flex;\n\njustify-content: space-between;\n\npadding: 6px;\n\nborder-bottom: 1px solid #eee;\n\n}\n\n.done {\n\ntext-decoration: line-through;\n\ncolor: #888;\n\n}\n\n&lt;\/style><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3.8 src\/App.vue<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;template>\n\n&lt;div class=\"container\">\n\n&lt;h1>Todo App&lt;\/h1>\n\n&lt;task-form @created=\"fetch\" \/>\n\n&lt;task-list \/>\n\n&lt;\/div>\n\n&lt;\/template>\n\n&lt;script setup>\n\nimport { onMounted } from 'vue'\n\nimport { useTasks } from '.\/stores\/useTasks'\n\nimport TaskForm from '.\/components\/TaskForm.vue'\n\nimport TaskList from '.\/components\/TaskList.vue'\n\nconst store = useTasks()\n\nconst fetch = () => store.fetch()\n\nonMounted(fetch)\n\n&lt;\/script>\n\n&lt;style>\n\n\/* minimal styles or use Tailwind\/Vuetify etc. *\/\n\n&lt;\/style><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3.9 Run frontend<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>npm run dev<\/code><\/pre>\n\n\n\n<p>Below is the screenshot of the final output:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"841\" height=\"666\" src=\"https:\/\/200oksolutions.com\/blog\/wp-content\/uploads\/2025\/11\/image.png\" alt=\"Todo App interface built with Laravel API and Vue 3 (Vite) showing task input fields and task list with add and delete options\" class=\"wp-image-2867\" srcset=\"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2025\/11\/image.png 841w, https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2025\/11\/image-300x238.png 300w, https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2025\/11\/image-768x608.png 768w\" sizes=\"(max-width: 841px) 100vw, 841px\" \/><\/figure>\n\n\n\n<p>Building a Todo App using <strong>Laravel API and Vue 3 (Vite)<\/strong> offers developers a clear understanding of full-stack integration, from backend API development to modern frontend implementation. This approach not only enhances productivity but also ensures scalability, clean architecture, and maintainable code. Such projects serve as a strong foundation for building real-world web applications with robust frameworks.<\/p>\n\n\n<div class=\"is-default-size wp-block-site-logo\"><a href=\"https:\/\/www.200oksolutions.com\/blog\/\" class=\"custom-logo-link light-mode-logo\" rel=\"home\"><img decoding=\"async\" width=\"484\" height=\"191\" src=\"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2026\/01\/cropped-200ok_logo.png\" class=\"custom-logo\" alt=\"Web Development, Software, and App Blog | 200OK Solutions\" srcset=\"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2026\/01\/cropped-200ok_logo.png 484w, https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2026\/01\/cropped-200ok_logo-300x118.png 300w\" sizes=\"(max-width: 484px) 100vw, 484px\" \/><\/a><\/div>","protected":false},"excerpt":{"rendered":"<p>Build a simple but complete Todo CRUD application using Laravel as a JSON API and Vue 3&hellip;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28],"tags":[1329,82,1327,1333,1330,1331,1334],"class_list":["post-2864","post","type-post","status-publish","format-standard","hentry","category-laravel","tag-crud-application","tag-full-stack-development","tag-laravel-api-tutorial","tag-laravel-for-beginners","tag-laravel-vue-integration","tag-pinia-state-management","tag-vite-frontend-setup"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Build a Todo App Using Laravel API and Vue 3 (Vite)<\/title>\n<meta name=\"description\" content=\"Build a Todo App using Laravel API and Vue 3 (Vite) with this step-by-step guide. Learn how to set up backend, connect APIs, and create a full-stack CRUD app using modern Vue features, Pinia, and Axios.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.200oksolutions.co.uk\/blog\/build-a-todo-app-laravel-vue3-vite\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build a Todo App Using Laravel API and Vue 3 (Vite)\" \/>\n<meta property=\"og:description\" content=\"Build a Todo App using Laravel API and Vue 3 (Vite) with this step-by-step guide. Learn how to set up backend, connect APIs, and create a full-stack CRUD app using modern Vue features, Pinia, and Axios.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.200oksolutions.co.uk\/blog\/build-a-todo-app-laravel-vue3-vite\" \/>\n<meta property=\"og:site_name\" content=\"Web Development, Software, and App Blog | 200OK Solutions\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-05T06:12:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-04T07:44:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/200oksolutions.com\/blog\/wp-content\/uploads\/2025\/11\/Build-Your-1-1024x576.png\" \/>\n<meta name=\"author\" content=\"Piyush Solanki\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Piyush Solanki\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Build a Todo App Using Laravel API and Vue 3 (Vite)","description":"Build a Todo App using Laravel API and Vue 3 (Vite) with this step-by-step guide. Learn how to set up backend, connect APIs, and create a full-stack CRUD app using modern Vue features, Pinia, and Axios.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.200oksolutions.co.uk\/blog\/build-a-todo-app-laravel-vue3-vite","og_locale":"en_US","og_type":"article","og_title":"Build a Todo App Using Laravel API and Vue 3 (Vite)","og_description":"Build a Todo App using Laravel API and Vue 3 (Vite) with this step-by-step guide. Learn how to set up backend, connect APIs, and create a full-stack CRUD app using modern Vue features, Pinia, and Axios.","og_url":"https:\/\/www.200oksolutions.co.uk\/blog\/build-a-todo-app-laravel-vue3-vite","og_site_name":"Web Development, Software, and App Blog | 200OK Solutions","article_published_time":"2025-11-05T06:12:10+00:00","article_modified_time":"2025-12-04T07:44:01+00:00","og_image":[{"url":"https:\/\/200oksolutions.com\/blog\/wp-content\/uploads\/2025\/11\/Build-Your-1-1024x576.png","type":"","width":"","height":""}],"author":"Piyush Solanki","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Piyush Solanki","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.200oksolutions.co.uk\/blog\/build-a-todo-app-laravel-vue3-vite#article","isPartOf":{"@id":"https:\/\/www.200oksolutions.com\/blog\/build-a-todo-app-laravel-api-vue-3-vite\/"},"author":{"name":"Piyush Solanki","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/person\/e07f6b8e3c9a90ce7b3b09427d26155e"},"headline":"Build a Todo App \u2014 Laravel API + Vue 3 (Vite)","datePublished":"2025-11-05T06:12:10+00:00","dateModified":"2025-12-04T07:44:01+00:00","mainEntityOfPage":{"@id":"https:\/\/www.200oksolutions.com\/blog\/build-a-todo-app-laravel-api-vue-3-vite\/"},"wordCount":309,"commentCount":0,"publisher":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.200oksolutions.co.uk\/blog\/build-a-todo-app-laravel-vue3-vite#primaryimage"},"thumbnailUrl":"https:\/\/200oksolutions.com\/blog\/wp-content\/uploads\/2025\/11\/Build-Your-1-1024x576.png","keywords":["CRUD Application","full stack development","Laravel API Tutorial","Laravel for Beginners","Laravel Vue Integration","Pinia State Management","Vite Frontend Setup"],"articleSection":["Laravel"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.200oksolutions.co.uk\/blog\/build-a-todo-app-laravel-vue3-vite#respond"]}]},{"@type":["WebPage","SearchResultsPage"],"@id":"https:\/\/www.200oksolutions.com\/blog\/build-a-todo-app-laravel-api-vue-3-vite\/","url":"https:\/\/www.200oksolutions.co.uk\/blog\/build-a-todo-app-laravel-vue3-vite","name":"Build a Todo App Using Laravel API and Vue 3 (Vite)","isPartOf":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.200oksolutions.co.uk\/blog\/build-a-todo-app-laravel-vue3-vite#primaryimage"},"image":{"@id":"https:\/\/www.200oksolutions.co.uk\/blog\/build-a-todo-app-laravel-vue3-vite#primaryimage"},"thumbnailUrl":"https:\/\/200oksolutions.com\/blog\/wp-content\/uploads\/2025\/11\/Build-Your-1-1024x576.png","datePublished":"2025-11-05T06:12:10+00:00","dateModified":"2025-12-04T07:44:01+00:00","description":"Build a Todo App using Laravel API and Vue 3 (Vite) with this step-by-step guide. Learn how to set up backend, connect APIs, and create a full-stack CRUD app using modern Vue features, Pinia, and Axios.","breadcrumb":{"@id":"https:\/\/www.200oksolutions.co.uk\/blog\/build-a-todo-app-laravel-vue3-vite#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.200oksolutions.co.uk\/blog\/build-a-todo-app-laravel-vue3-vite"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.200oksolutions.co.uk\/blog\/build-a-todo-app-laravel-vue3-vite#primaryimage","url":"https:\/\/200oksolutions.com\/blog\/wp-content\/uploads\/2025\/11\/Build-Your-1-1024x576.png","contentUrl":"https:\/\/200oksolutions.com\/blog\/wp-content\/uploads\/2025\/11\/Build-Your-1-1024x576.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.200oksolutions.co.uk\/blog\/build-a-todo-app-laravel-vue3-vite#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.200oksolutions.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Home > Blog > Laravel > Build a Todo App (Laravel + Vue 3)"}]},{"@type":"WebSite","@id":"https:\/\/www.200oksolutions.com\/blog\/#website","url":"https:\/\/www.200oksolutions.com\/blog\/","name":"Web Development, Software, and App Blog | 200OK Solutions","description":"","publisher":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.200oksolutions.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.200oksolutions.com\/blog\/#organization","name":"Web Development Blog | Software Blog | App Blog","url":"https:\/\/www.200oksolutions.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/200oksolutions.com\/blog\/wp-content\/uploads\/2025\/09\/200ok_logo-CGzMrWDu.png","contentUrl":"https:\/\/200oksolutions.com\/blog\/wp-content\/uploads\/2025\/09\/200ok_logo-CGzMrWDu.png","width":500,"height":191,"caption":"Web Development Blog | Software Blog | App Blog"},"image":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/200ok_solutions\/"]},{"@type":"Person","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/person\/e07f6b8e3c9a90ce7b3b09427d26155e","name":"Piyush Solanki","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/962a2b0b4db856e6851ec7d838597a0395adcaae9c0091d223de9942a4254461?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/962a2b0b4db856e6851ec7d838597a0395adcaae9c0091d223de9942a4254461?s=96&d=mm&r=g","caption":"Piyush Solanki"},"description":"Piyush is a seasoned PHP Tech Lead with 10+ years of experience architecting and delivering scalable web and mobile backend solutions for global brands and fast-growing SMEs. He specializes in PHP, MySQL, CodeIgniter, WordPress, and custom API development, helping businesses modernize legacy systems and launch secure, high-performance digital products. He collaborates closely with mobile teams building Android &amp; iOS apps , developing RESTful APIs, cloud integrations, and secure payment systems using platforms like Stripe, AWS S3, and OTP\/SMS gateways. His work extends across CMS customization, microservices-ready backend architectures, and smooth product deployments across Linux and cloud-based environments. Piyush also has a strong understanding of modern front-end technologies such as React and TypeScript, enabling him to contribute to full-stack development workflows and advanced admin panels. With a successful delivery track record in the UK market and experience building digital products for sectors like finance, hospitality, retail, consulting, and food services, Piyush is passionate about helping SMEs scale technology teams, improve operational efficiency, and accelerate innovation through backend excellence and digital tools.","url":"https:\/\/www.200oksolutions.com\/blog\/author\/piyush\/"}]}},"_links":{"self":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts\/2864","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=2864"}],"version-history":[{"count":6,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts\/2864\/revisions"}],"predecessor-version":[{"id":2874,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts\/2864\/revisions\/2874"}],"wp:attachment":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=2864"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=2864"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=2864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}