Home/ Documentation/ Vue Designer/ Tutorials & Courses/ Pizzeria Static HTML into Vue Islands with îles, Vitepress & Astro

Pizzeria Static HTML into Vue Islands with îles, Vitepress & Astro

Learn with Vue Designer – Course 1

Start with this 6-hour course, organized into 40 concise chapters.

Throughout this course, we will transform a static HTML landing page into dynamic Vue Islands using advanced frameworks such as îles, Vitepress, and Astro. This practical experience will help you uncover the vast capabilities of Vue Designer.

We start with the basics of Vue and progress naturally towards more advanced concepts. Whether you’re a beginner or looking to expand your skills, our course ensures a smooth journey from simple to complex Vue concepts.

Vue Components

In the first 12 chapters, we will convert the static HTML page into plain Vue components simply through copy & paste.

Fundamentals of Vue

Moving on to the second set of 12 chapters, we will delve into the fundamentals of Vue. This phase will involve transforming reusable parts of the page into simple, manageable components.

Vue’s Reactivity and Composition API

In the subsequent 12 chapters, we will explore Vue’s reactivity mechanism with its powerful composition API. Additionally, we’ll learn how to fetch pizza data from an external API source and gain insights into the trade-offs between Multi-page and Single-page applications.

Astro, and Vitepress with Pinia State Management

Lastly, in the concluding 4 Bonus sections, we’ll take our Pizzeria îles app to the next level by transitioning it into both Astro and Vitepress frameworks. Additionally, we’ll incorporate Pinia for efficient state management, resulting in smooth, snappy, and responsive navigation through Vitepress.

Special offer for early adopters of Vue Designer

Take advantage of our time-limited launch offer with half off the regular price and free premium add-ons for Tailwind CSS and Vuetify.

And you get to keep this promotional price and add-ons for as long as your plan is active, not only for the first year.

Visit Vue Designer Homepage to take advantage of the launch offer

Here is a full list of chapters for your easy reference:

02Pizzeria Landing Page
03Clone Iles TailwindCSS Template
04Copy Assets Into Iles Template
05Open Project in Vue Designer
06Clean-Up Iles Template
07Create HeroSection
08Create FeatureSection
09Convert Other Sections Into Components
10Svelte TheFooter
11Add Hamburger Interactions To Head/Body
12Build App with Site-URL (SEO)
13Rendering Strategies
14Let’s Vue with SFC
15Create MyButton Component
16Use BaseButton Component
17Use BaseIcon Component
18Treeshaking By Vite
19Create PizzaCard With :props & v-directives
20ChatGPT vs Lorem Ipsum
21Re-build and Review
22Add trailingIcon To BaseButton via #slots
23Add To Cart with @events
24Add New pages  & NavBar Island Group
25Add Checkout Button To PizzaStore
26Make the Cart reactive with `ref`
27Conditional Badge with `computed`
29FloatingCart & Cart composable
30Move Pizzas array to db.json
31Async fetch Pizza Data from API
32Move FloatingCart to layout
33Page Navigation and dark/light mode
34State Management & UX in MPAs
35Vite-Powered Meta-frameworks
36Let’s Re-Vue
37Bonus intro – Authoring Experience
38Bonus 1 – Convert Pizzeria Iles to Astro
39Bonus 2 – Convert Pizzeria Iles to Vitepress
40Bonus 3 – Pinia & Pizzeria Vitepress

Last updated on September 28, 2023 at 7:40 pm

Print this article