Kindergarten Vue Template – Hibokids

About This Item

Hibokids Vue is a kindergarten Vue template for kindergartens and nurseries. It rebuilds the Hibokids design in Vue 3 with the Composition API. Pinia holds the shared state, and Vue Router serves all 38 pages.

Because the nursery logic lives in reactive stores, every choice updates the page at once. That includes a fee engine that prices every care plan and a three-step enrolment wizard with a live fee summary. Meanwhile, the design stays the same as the Hibokids demo.

Layouts And Home Pages

Hibokids Vue ships with three home page layouts: Safe Garden, Second Home and Perfect Place. Each one is a view built from single-file components, so sections move between pages easily.

Nursery Views

• Fee Engine – daily rates per age room, full or half days, multi-day and sibling discounts.
• Enrolment – a three-step wizard with a live fee summary.
• Care Plans – grid, list and stacked layouts with age filter and sort.
• Nurseries & Menu – five nurseries with opening hours and an open-now status.
• Baby Shop – four shop layouts, product page, cart with coupons and delivery options, checkout and wishlist.

Kindergarten Vue Template Features

• Vue 3 single-file components with <script setup>
• Pinia stores for the cart and the theme
• Vue Router with lazy-loaded routes for 38 pages
• Vite build with hot module replacement
• Responsive from phones to wide screens
• Documentation for setup, structure and changes

Project Setup

Install Node 18 or newer first. Next, run npm install and npm run dev. Finally, npm run build creates a static site for any host.

Looking for this kindergarten Vue template in another stack? Hibokids also comes as HTML5, React, Angular and WordPress. The developer bundle includes every format for 20% less. See more Kids & School Vue templates.

Built with Vue 3, Pinia and Vite.