[{"data":1,"prerenderedAt":226},["ShallowReactive",2],{"project-en-vue-base-project":3},{"id":4,"title":5,"body":6,"description":216,"extension":217,"images":218,"meta":220,"navigation":221,"path":222,"seo":223,"stem":224,"__hash__":225},"projects_en/en/projects/vue-base-project.md","Vue Base Project",{"type":7,"value":8,"toc":206},"minimark",[9,21,26,29,84,88,118,122,125,129,132,136,139,143],[10,11,12,13,20],"p",{},"A Vue 3 starter template I built to accelerate new projects. Instead of setting up the same boilerplate every time, this template comes with a full component library, authentication flow, theming, i18n, and API layer ready to go. Clone it, and start building. Browse the ",[14,15,19],"a",{"href":16,"rel":17},"https://vue-base.maxkruiswegt.com/showcase",[18],"nofollow","live component showcase",".",[22,23,25],"h2",{"id":24},"form-components","🧩 Form Components",[10,27,28],{},"A complete set of form inputs, all with validation support via Vee-validate and Zod:",[30,31,32,41,48,55,62,69],"ul",{},[33,34,35,36,40],"li",{},"📝 ",[37,38,39],"strong",{},"TextField"," - Text input with icon slots, password mode, and visibility toggle",[33,42,43,44,47],{},"📄 ",[37,45,46],{},"TextArea"," - Multi-line input with resize control",[33,49,50,51,54],{},"📋 ",[37,52,53],{},"SelectField"," - Searchable, clearable dropdown with multi-select support",[33,56,57,58,61],{},"📅 ",[37,59,60],{},"DateField"," - Date picker with format options and time selection",[33,63,64,65,68],{},"🎚️ ",[37,66,67],{},"RangeField"," - Slider for numerical ranges with tooltip",[33,70,71,72,75,76,79,80,83],{},"✅ ",[37,73,74],{},"CheckboxField",", ",[37,77,78],{},"SwitchField",", and ",[37,81,82],{},"RadioButtons"," for boolean and choice inputs",[22,85,87],{"id":86},"️-ui-components","🖼️ UI Components",[30,89,90,97,104,111],{},[33,91,92,93,96],{},"🔘 ",[37,94,95],{},"BaseButton"," - Multiple styles (primary, secondary, text, danger, success) with icon support and bordered variant",[33,98,99,100,103],{},"💬 ",[37,101,102],{},"BaseModal"," - Dialog component with customizable size and footer slots",[33,105,106,107,110],{},"🔔 ",[37,108,109],{},"BaseToast"," - Notification system with info, success, warning, and error types",[33,112,113,114,117],{},"⏳ ",[37,115,116],{},"LoadingSpinner"," - Loading indicator with overlay mode",[22,119,121],{"id":120},"component-showcase","📖 Component Showcase",[10,123,124],{},"The template includes 13 showcase pages that serve as living documentation. Each component has a dedicated page demonstrating its features, props, and usage patterns.",[22,126,128],{"id":127},"theming-styling","🎨 Theming & Styling",[10,130,131],{},"A complete CSS variable-based design system with dark and light mode. Includes a full color palette with 10-step tint and shade scales for primary, secondary, and accent colors. Mobile-first responsive layout with breakpoints, consistent typography using a Perfect Fourth scale, and a noise texture overlay for visual depth.",[22,133,135],{"id":134},"authentication","🔐 Authentication",[10,137,138],{},"Built-in JWT authentication flow with login, registration, protected routes, automatic token refresh, and user profile management.",[22,140,142],{"id":141},"technologies","💻 Technologies",[30,144,145,161,168,175,182,192,199],{},[33,146,147,148,151,152,155,156,160],{},"⚡ ",[37,149,150],{},"Vue 3"," with ",[37,153,154],{},"TypeScript"," and ",[157,158,159],"code",{},"\u003Cscript setup>"," syntax",[33,162,163,164,167],{},"⚙️ ",[37,165,166],{},"Vite 6"," for fast development and optimized builds",[33,169,170,171,174],{},"🗄️ ",[37,172,173],{},"Pinia"," for state management",[33,176,177,178,181],{},"🌐 ",[37,179,180],{},"Vue I18n"," for English/Dutch language support",[33,183,71,184,187,188,191],{},[37,185,186],{},"Vee-validate"," + ",[37,189,190],{},"Zod"," for type-safe form validation",[33,193,194,195,198],{},"📡 ",[37,196,197],{},"Axios"," with request/response interceptors",[33,200,201,202,205],{},"🔣 ",[37,203,204],{},"Material Symbols"," via unplugin-icons",{"title":207,"searchDepth":208,"depth":208,"links":209},"",2,[210,211,212,213,214,215],{"id":24,"depth":208,"text":25},{"id":86,"depth":208,"text":87},{"id":120,"depth":208,"text":121},{"id":127,"depth":208,"text":128},{"id":134,"depth":208,"text":135},{"id":141,"depth":208,"text":142},"A production-ready Vue 3 starter template with a built-in component library.","md",[219],"/images/vuebaseproject/Banner.webp",{},true,"/en/projects/vue-base-project",{"title":5,"description":216},"en/projects/vue-base-project","pxgMKJ95ny_shXvNtI7emfLbuviquJfoXky2tgnOdnA",1771364898383]