Vue Designer 🎉 - A desktop visual editor for Mac, Windows and Linux that lets you visually design your Vue applications, by Pinegrow. It integrates into your current workflow, no lock-in 😃
In 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.
❗Update:
In the bonus section, at 5:32:26, when we convert the Iles app into a Vitepress app, the-auto importing of components can be fixed by amending the regex in vitepress.config.ts. Remove the current include array under `AutoImportComponents` and uncomment the line just above it that has the include array with the correct regex.
❤️ Special offer for early adopters 🚀 of Vue Designer - checkout [ Ссылка ]
🔗 Resources
Inputs
- Source HTML page - [ Ссылка ]
- Starter Template - [ Ссылка ]
🔥 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. Checkout [ Ссылка ]
Final Outputs
- Pizzeria Iles - [ Ссылка ], Github: [ Ссылка ]
- Pizzeria Astro - [ Ссылка ], Github: [ Ссылка ]
- Pizzeria Vitepress - [ Ссылка ], Github: [ Ссылка ]
📖 Read more: [ Ссылка ]
➡️ Learn about Pinegrow - [ Ссылка ]
🙌 Connect with Us:
- Facebook - [ Ссылка ]
- Twitter/X - [ Ссылка ]
- Discord - [ Ссылка ]
- Community Forum - [ Ссылка ]
🔔 Make sure to subscribe to our channel and hit the notification bell so you never miss an update. Like, share, and leave your comments below the video to let us know your thoughts and questions!
#iles #vue #vite #astro #vitepress #nuxt #LearnWithVueDesigner #pinegrow #vuedesigner #vuejs #vitejs #nuxtjs #îles #astrojs
⌚ Timestamps:
00:00 - 01 Introduction
02:38 - 02 Pizzeria Landing Page
07:11:30 - 03 Clone Iles TailwindCSS Template
18:08 - 04 Copy Assets Into Iles Template
20:42:30 - 05 Open Project in Vue Designer
30:10 - 06 Clean-Up Iles Template
38:12 - 07 Create HeroSection
44:45:30 - 08 Create FeatureSection
52:35:30 - 09 Convert Other Sections Into Components
56:26 - 10 Svelte TheFooter
01:02:30 - 11 Add Hamburger Interactions To Head/Body
01:09:08 - 12 Build App with Site-URL (SEO)
01:17:30 - 13 Rendering Strategies
01:22:30 - 14 Let's Vue with SFC
01:25:30 - 15 Create MyButton Component
01:36:36 - 16 Use BaseButton Component
01:47:30 - 17 Use BaseIcon Component
01:54:35 - 18 Treeshaking By Vite
01:59:29 - 19 Create PizzaCard With :props & v-directives
02:14:48 - 20 ChatGPT vs Lorem Ipsum
02:21:16 - 21 Re-build and Review
02:23:14 - 22 Add trailingIcon To BaseButton via slots
02:31:04 - 23 Add To Cart with @events
02:59:14 - 24 Add New pages & NavBar Island Group
03:16:12 - 25 Add Checkout Button To PizzaStore
03:24:45 - 26 Make the Cart reactive with `ref`
03:29:49 - 27 Conditional Badge with `computed`
03:37:30 - 28 Typescript
03:40:16 - 29 FloatingCart & Cart composable
03:50:18 - 30 Move Pizzas array to db.json
03:52:13 - 31 Async fetch Pizza Data from API
04:06:49 - 32 Move FloatingCart to layout
04:13:16 - 33 Page Navigation and dark/light mode
04:31:30 - 34 State Management & UX in MPAs
04:36:13 - 35 Vite-Powered Meta-frameworks
04:42:45 - 36 Let’s Re-Vue
04:46:30 - Bonus intro - Authoring Experience
04:48:45 - Bonus 1 - Convert Pizzeria Iles to Astro
05:18:41 - Bonus 2 - Convert Pizzeria Iles to Vitepress
05:47:30 - Bonus 3 - Pinia & Pizzeria Vitepress
