Examples ======== This section contains practical examples demonstrating BadGUI features, including new components like cards, tabs, headers, footers, images, and icons, with emphasis on the **🚀 Instant Development** workflow using ``bg.dev()``. 🚀 Quick Start with bg.dev() ----------------------------- The fastest way to get started - one command does it all: .. code-block:: python import badgui as bg with bg.page("/", "HomePage", "Quick Start"): bg.label("Hello BadGUI!").classes("text-h2 text-primary text-center") bg.button("Click Me").classes("q-btn-primary q-btn-lg") # 🚀 INSTANT DEVELOPMENT - Creates temp build, installs deps, starts server! bg.dev() Save as ``quick_start.py`` and run:: python quick_start.py Your app opens automatically at ``http://localhost:9000`` ✨ Modern Website with New Components ---------------------------------- A complete website demonstrating all the new components: .. code-block:: python import badgui as bg # Home page with full component showcase with bg.page("/", "HomePage", "Modern Website"): # Header with navigation with bg.header() as nav_header: nav_header.classes("bg-primary text-white q-pa-md") with bg.row() as nav_row: nav_row.classes("items-center justify-between") # Logo with icon with bg.row() as logo: logo.classes("items-center q-gutter-sm") bg.icon("home", size="2rem", color="white") bg.label("My Website").classes("text-h4") # Navigation links with bg.row() as nav_links: nav_links.classes("q-gutter-md") bg.link("Home", "/").classes("text-white") bg.link("About", "/about").classes("text-white") # Main content with bg.column() as main_content: main_content.classes("q-pa-lg") # Hero card with bg.card() as hero: hero.classes("bg-blue-1 q-pa-xl q-mb-lg") with bg.card_section(): bg.label("Welcome to BadGUI").classes("text-h3 text-primary q-mb-md") bg.label("Build modern web applications with Python syntax") with bg.card_actions(): bg.button("Get Started").classes("q-btn-primary") bg.button("Learn More").classes("q-btn-secondary") # Feature cards with responsive layout with bg.row() as features: features.classes("q-gutter-md wrap") # Feature 1 with bg.card() as feature1: feature1.classes("col-12 col-md-4") with bg.card_section(): bg.icon("speed", size="3rem", color="primary").classes("q-mb-md") bg.label("Fast Development").classes("text-h5 q-mb-md") bg.label("Rapid prototyping with Python syntax") # Feature 2 with bg.card() as feature2: feature2.classes("col-12 col-md-4") with bg.card_section(): bg.icon("build", size="3rem", color="secondary").classes("q-mb-md") bg.label("Modern Stack").classes("text-h5 q-mb-md") bg.label("Vue.js 3 + Quasar Framework") # Feature 3 with bg.card() as feature3: feature3.classes("col-12 col-md-4") with bg.card_section(): bg.icon("code", size="3rem", color="accent").classes("q-mb-md") bg.label("NiceGUI Compatible").classes("text-h5 q-mb-md") bg.label("Familiar syntax and patterns") # Image gallery with bg.card() as gallery: gallery.classes("q-mt-lg") with bg.card_section(): with bg.row() as gallery_header: gallery_header.classes("items-center q-gutter-sm q-mb-lg") bg.icon("photo_library", size="2rem", color="primary") bg.label("Project Gallery").classes("text-h4") with bg.row() as gallery_row: gallery_row.classes("q-gutter-md wrap") # Gallery items projects = [ ("E-commerce Platform", "Modern shopping experience"), ("Dashboard App", "Data visualization tool"), ("Mobile App", "Cross-platform solution") ] for i, (title, desc) in enumerate(projects, 1): with bg.column() as gallery_item: gallery_item.classes("col-12 col-sm-6 col-md-4 text-center") bg.image(f"https://picsum.photos/300/200?random={i}").classes("rounded-lg shadow-md q-mb-sm full-width") bg.label(title).classes("text-h6") bg.label(desc) # Tabs example with bg.tabs() as main_tabs: main_tabs.classes("text-primary q-mt-lg") with bg.tab("features", "Features"): pass with bg.tab("pricing", "Pricing"): pass with bg.tab("support", "Support"): pass with bg.tab_panels() as panels: panels.classes("q-pa-md") with bg.tab_panel("features"): with bg.column() as features_content: features_content.classes("q-gutter-md") bg.label("Comprehensive Feature Set").classes("text-h5 q-mb-md") features_list = [ ("Context Managers", "Proper component nesting with 'with' statements"), ("Responsive Design", "Built-in flex utilities and breakpoints"), ("Material Icons", "Full Material Design icon library"), ("NiceGUI API", "Familiar method chaining and styling") ] for title, desc in features_list: with bg.card() as feature_card: feature_card.classes("q-pa-md") with bg.card_section(): with bg.row() as feature_row: feature_row.classes("items-center q-gutter-md") bg.icon("check_circle", color="positive") with bg.column(): bg.label(title).classes("text-h6") bg.label(desc) with bg.tab_panel("pricing"): bg.label("Pricing information goes here").classes("text-h5") bg.label("BadGUI is open source and free to use!") with bg.tab_panel("support"): bg.label("Support & Documentation").classes("text-h5 q-mb-md") bg.label("Visit our GitHub repository for documentation and support") # Footer with bg.footer() as page_footer: page_footer.classes("bg-dark text-white q-pa-lg") with bg.column(): with bg.row() as footer_content: footer_content.classes("justify-between items-center") # Company info with bg.column(): with bg.row() as footer_logo: footer_logo.classes("items-center q-gutter-sm q-mb-md") bg.icon("home", size="1.5rem", color="white") bg.label("My Website").classes("text-h6") bg.label("Building the future of web development") # Social icons with bg.row() as social_icons: social_icons.classes("q-gutter-md") bg.icon("facebook", size="1.5rem", color="blue") bg.icon("twitter", size="1.5rem", color="light-blue") bg.icon("github", size="1.5rem", color="white") # Copyright with bg.row() as copyright: copyright.classes("justify-center q-pt-lg border-t border-gray-600") bg.label("© 2024 My Website. Built with BadGUI.").classes("opacity-75") # 🚀 Start instant development bg.dev(port=3000) Context Manager Usage Guide --------------------------- Proper usage of BadGUI's context managers: .. code-block:: python import badgui as bg # ✅ CORRECT: Use 'as' to capture the component with bg.column() as main_col: main_col.classes("q-pa-lg") with bg.row() as header_row: header_row.classes("items-center justify-between") bg.label("Title") # ❌ WRONG: Cannot call .classes() on context manager directly # with bg.column().classes("q-pa-lg"): # This will cause AttributeError # ✅ CORRECT: Cards with proper nesting with bg.card() as my_card: my_card.classes("q-ma-md shadow-5") with bg.card_section(): bg.label("Card Title").classes("text-h5") bg.label("Card content") with bg.card_actions(): bg.button("Action 1") bg.button("Action 2") Responsive Layout Examples -------------------------- Preventing card overflow with proper flex utilities: .. code-block:: python import badgui as bg with bg.page("/responsive", "ResponsivePage", "Responsive Layouts"): with bg.column() as main: main.classes("q-pa-lg") # Card grid that wraps properly with bg.row() as card_grid: card_grid.classes("q-gutter-md wrap") # 'wrap' prevents overflow # Cards with responsive column classes for i in range(6): with bg.card() as grid_card: grid_card.classes("col-12 col-sm-6 col-md-4 col-lg-2") # Responsive breakpoints with bg.card_section(): bg.label(f"Card {i+1}").classes("text-h6") bg.label("Responsive card content") # Mixed responsive layout with bg.row() as mixed_layout: mixed_layout.classes("q-gutter-md wrap") # Main content area with bg.column() as main_content: main_content.classes("col-12 col-md-8") # Full width on mobile, 2/3 on desktop with bg.card() as main_card: main_card.classes("q-pa-lg") bg.label("Main Content").classes("text-h4 q-mb-md") bg.label("This content area is responsive and adapts to screen size") # Sidebar with bg.column() as sidebar: sidebar.classes("col-12 col-md-4") # Full width on mobile, 1/3 on desktop with bg.card() as sidebar_card: sidebar_card.classes("q-pa-md bg-grey-1") bg.label("Sidebar").classes("text-h5 q-mb-md") bg.label("Sidebar content stacks below main content on mobile") bg.dev(port=3001) Dashboard Application --------------------- A complete dashboard with multiple sections: .. code-block:: python import badgui as bg def create_sidebar(): \"\"\"Create sidebar navigation.\"\"\" with bg.column().classes("bg-grey-2 q-pa-md") as sidebar: sidebar.style("min-height: 100vh; width: 250px") bg.label("Dashboard").classes("text-h5 q-mb-lg text-center") # Navigation items nav_items = [ ("Overview", "/"), ("Analytics", "/analytics"), ("Users", "/users"), ("Settings", "/settings") ] for label, path in nav_items: bg.link(label, path).classes("q-btn q-btn-flat full-width justify-start q-mb-sm") def create_header(title): \"\"\"Create page header.\"\"\" with bg.row().classes("bg-primary text-white q-pa-md items-center justify-between"): bg.label(title).classes("text-h4") bg.label("Welcome, User").classes("text-body1") def create_stat_card(title, value, icon, color): \"\"\"Create a statistics card.\"\"\" with bg.column().classes(f"bg-{color}-1 q-pa-lg rounded text-center") as card: bg.label(icon).classes(f"text-{color} text-h3 q-mb-md") bg.label(value).classes("text-h4 text-weight-bold q-mb-sm") bg.label(title).classes("text-body2 text-grey-7") # Overview Page with bg.page("/", "OverviewPage", "Dashboard - Overview"): with bg.row().classes("no-wrap") as main_layout: create_sidebar() with bg.column().classes("col"): create_header("Overview") with bg.column().classes("q-pa-lg"): # Statistics row with bg.row().classes("q-col-gutter-lg q-mb-lg"): with bg.column().classes("col-12 col-md-3"): create_stat_card("Total Users", "1,234", "👥", "blue") with bg.column().classes("col-12 col-md-3"): create_stat_card("Revenue", "$12,345", "💰", "green") with bg.column().classes("col-12 col-md-3"): create_stat_card("Orders", "567", "📦", "orange") with bg.column().classes("col-12 col-md-3"): create_stat_card("Growth", "+23%", "📈", "purple") # Recent activity bg.label("Recent Activity").classes("text-h5 q-mb-md") with bg.column().classes("bg-white rounded q-pa-lg shadow-1"): activities = [ "New user registered", "Order #1234 completed", "Payment received", "Product updated" ] for activity in activities: bg.label(f"• {activity}").classes("q-mb-sm") # Analytics Page with bg.page("/analytics", "AnalyticsPage", "Dashboard - Analytics"): with bg.row().classes("no-wrap"): create_sidebar() with bg.column().classes("col"): create_header("Analytics") with bg.column().classes("q-pa-lg"): bg.label("Analytics Dashboard").classes("text-h4 q-mb-lg") # Placeholder for charts with bg.row().classes("q-col-gutter-lg"): with bg.column().classes("col-12 col-md-6"): with bg.column().classes("bg-white q-pa-lg rounded shadow-1"): bg.label("Revenue Chart").classes("text-h6 q-mb-md") bg.label("Chart placeholder - integrate with Chart.js").classes("text-center q-pa-xl bg-grey-1") with bg.column().classes("col-12 col-md-6"): with bg.column().classes("bg-white q-pa-lg rounded shadow-1"): bg.label("User Growth").classes("text-h6 q-mb-md") bg.label("Chart placeholder - integrate with Chart.js").classes("text-center q-pa-xl bg-grey-1") # Users Page with bg.page("/users", "UsersPage", "Dashboard - Users"): with bg.row().classes("no-wrap"): create_sidebar() with bg.column().classes("col"): create_header("Users") with bg.column().classes("q-pa-lg"): bg.label("User Management").classes("text-h4 q-mb-lg") # User table header with bg.row().classes("bg-grey-3 q-pa-md rounded-top"): bg.label("Name").classes("col-3 text-weight-bold") bg.label("Email").classes("col-4 text-weight-bold") bg.label("Role").classes("col-2 text-weight-bold") bg.label("Actions").classes("col-3 text-weight-bold") # User rows users = [ ("John Doe", "john@example.com", "Admin"), ("Jane Smith", "jane@example.com", "User"), ("Bob Johnson", "bob@example.com", "Editor") ] for name, email, role in users: with bg.row().classes("bg-white q-pa-md border-bottom"): bg.label(name).classes("col-3") bg.label(email).classes("col-4") bg.label(role).classes("col-2") with bg.row().classes("col-3 q-gutter-sm"): bg.button("Edit").classes("q-btn-sm q-btn-primary") bg.button("Delete").classes("q-btn-sm q-btn-negative") bg.build("dashboard-app") E-commerce Store ---------------- A complete e-commerce store example: .. code-block:: python import badgui as bg def create_navbar(): \"\"\"Create store navigation bar.\"\"\" with bg.row().classes("bg-white shadow-1 q-pa-md items-center justify-between"): bg.label("🛍️ MyStore").classes("text-h5 text-primary text-weight-bold") with bg.row().classes("q-gutter-md items-center"): bg.input(placeholder="Search products...").classes("").props("outlined dense") bg.link("Products", "/products").classes("text-grey-8 no-underline") bg.link("Cart (0)", "/cart").classes("text-grey-8 no-underline") bg.button("Login").classes("q-btn-primary q-btn-sm") def create_product_card(name, price, image_placeholder): \"\"\"Create a product card.\"\"\" with bg.column().classes("bg-white rounded shadow-2 q-pa-md"): # Product image placeholder with bg.column().classes("bg-grey-3 rounded q-mb-md text-center q-pa-xl"): bg.label("📷").classes("text-h3") bg.label(image_placeholder).classes("text-caption") bg.label(name).classes("text-h6 q-mb-sm") bg.label(f"${price}").classes("text-h5 text-green-6 text-weight-bold q-mb-md") with bg.row().classes("q-gutter-sm"): bg.button("Add to Cart").classes("q-btn-primary col") bg.button("♡").classes("q-btn-outline col-auto") # Home Page with bg.page("/", "HomePage", "MyStore - Home"): create_navbar() # Hero section with bg.column().classes("bg-gradient-to-r from-purple-400 to-pink-400 text-white text-center q-pa-xl"): bg.label("Welcome to MyStore").classes("text-h2 q-mb-md") bg.label("Discover amazing products at great prices").classes("text-h6 q-mb-lg") bg.link("Shop Now", "/products").classes("q-btn q-btn-lg q-btn-white text-primary") # Featured products with bg.column().classes("q-pa-xl"): bg.label("Featured Products").classes("text-h4 text-center q-mb-lg") with bg.row().classes("q-col-gutter-lg"): products = [ ("Wireless Headphones", "99.99", "Headphones Image"), ("Smart Watch", "199.99", "Watch Image"), ("Laptop Stand", "49.99", "Stand Image"), ("USB-C Cable", "19.99", "Cable Image") ] for name, price, image in products: with bg.column().classes("col-12 col-sm-6 col-md-3"): create_product_card(name, price, image) # Products Page with bg.page("/products", "ProductsPage", "Products"): create_navbar() with bg.row().classes("q-pa-lg"): # Sidebar filters with bg.column().classes("col-12 col-md-3 q-pr-lg"): bg.label("Filters").classes("text-h6 q-mb-md") with bg.column().classes("bg-white rounded q-pa-md shadow-1"): bg.label("Category").classes("text-weight-bold q-mb-sm") categories = ["Electronics", "Clothing", "Home", "Sports"] for category in categories: with bg.row().classes("items-center q-mb-sm"): bg.label(f"☐ {category}").classes("text-body2") bg.label("Price Range").classes("text-weight-bold q-mb-sm q-mt-md") bg.input(placeholder="Min").classes("q-mb-sm").props("outlined dense type=number") bg.input(placeholder="Max").classes("q-mb-md").props("outlined dense type=number") bg.button("Apply Filters").classes("q-btn-primary full-width") # Products grid with bg.column().classes("col-12 col-md-9"): bg.label("All Products").classes("text-h5 q-mb-lg") with bg.row().classes("q-col-gutter-lg"): # Generate more products all_products = [ ("Gaming Mouse", "79.99", "Mouse Image"), ("Mechanical Keyboard", "129.99", "Keyboard Image"), ("4K Monitor", "299.99", "Monitor Image"), ("Webcam", "89.99", "Camera Image"), ("Phone Case", "24.99", "Case Image"), ("Power Bank", "39.99", "Battery Image") ] for name, price, image in all_products: with bg.column().classes("col-12 col-sm-6 col-lg-4"): create_product_card(name, price, image) # Cart Page with bg.page("/cart", "CartPage", "Shopping Cart"): create_navbar() with bg.column().classes("q-pa-xl max-width-md mx-auto"): bg.label("Shopping Cart").classes("text-h4 q-mb-lg") # Cart items cart_items = [ ("Wireless Headphones", "99.99", "1"), ("Smart Watch", "199.99", "1") ] for name, price, qty in cart_items: with bg.row().classes("bg-white rounded q-pa-md q-mb-md shadow-1 items-center"): with bg.column().classes("col"): bg.label(name).classes("text-h6") bg.label(f"${price}").classes("text-green-6") with bg.column().classes("col-auto"): bg.input(value=qty).classes("text-center").props("outlined dense type=number style=width:60px") with bg.column().classes("col-auto"): bg.button("Remove").classes("q-btn-sm q-btn-negative") # Cart total with bg.row().classes("bg-grey-1 q-pa-md rounded justify-between items-center q-mt-lg"): bg.label("Total: $299.98").classes("text-h5 text-weight-bold") bg.button("Checkout").classes("q-btn-lg q-btn-primary") bg.build("ecommerce-store") Portfolio Website ----------------- A personal portfolio website: .. code-block:: python import badgui as bg def create_nav(): \"\"\"Create navigation menu.\"\"\" with bg.row().classes("bg-white shadow-1 q-pa-md justify-between items-center sticky-top"): bg.label("John Developer").classes("text-h6 text-primary text-weight-bold") with bg.row().classes("q-gutter-lg"): bg.link("Home", "/").classes("text-grey-8 no-underline hover-primary") bg.link("About", "/about").classes("text-grey-8 no-underline hover-primary") bg.link("Projects", "/projects").classes("text-grey-8 no-underline hover-primary") bg.link("Contact", "/contact").classes("text-grey-8 no-underline hover-primary") # Home Page with bg.page("/", "HomePage", "John Developer - Portfolio"): create_nav() # Hero section with bg.column().classes("text-center q-pa-xl bg-gradient-to-br from-blue-50 to-indigo-100"): bg.label("Hi, I'm John").classes("text-h2 q-mb-md") bg.label("Full Stack Developer").classes("text-h4 text-grey-7 q-mb-lg") bg.label("I create beautiful, functional web applications").classes("text-h6 text-grey-6 q-mb-xl") with bg.row().classes("justify-center q-gutter-md"): bg.link("View My Work", "/projects").classes("q-btn q-btn-lg q-btn-primary") bg.link("Get In Touch", "/contact").classes("q-btn q-btn-lg q-btn-outline") # Skills section with bg.column().classes("q-pa-xl"): bg.label("Technologies I Work With").classes("text-h4 text-center q-mb-lg") with bg.row().classes("justify-center q-col-gutter-lg"): skills = [ ("Python", "🐍"), ("JavaScript", "⚡"), ("Vue.js", "💚"), ("React", "⚛️"), ("Node.js", "🟢"), ("Database", "🗄️") ] for skill, icon in skills: with bg.column().classes("col-6 col-sm-4 col-md-2 text-center"): with bg.column().classes("bg-white rounded shadow-2 q-pa-lg"): bg.label(icon).classes("text-h2 q-mb-md") bg.label(skill).classes("text-weight-bold") # Projects Page with bg.page("/projects", "ProjectsPage", "Projects"): create_nav() with bg.column().classes("q-pa-xl"): bg.label("My Projects").classes("text-h3 text-center q-mb-xl") projects = [ ("E-commerce Platform", "Full-stack online store with payment integration", "🛒"), ("Task Management App", "Collaborative project management tool", "✅"), ("Weather Dashboard", "Real-time weather data visualization", "🌤️"), ("Blog Platform", "Content management system with admin panel", "📝") ] with bg.row().classes("q-col-gutter-xl"): for title, desc, icon in projects: with bg.column().classes("col-12 col-md-6"): with bg.column().classes("bg-white rounded shadow-4 q-pa-lg"): bg.label(icon).classes("text-h1 text-center q-mb-md") bg.label(title).classes("text-h5 text-center q-mb-md") bg.label(desc).classes("text-body1 text-grey-7 text-center q-mb-lg") with bg.row().classes("justify-center q-gutter-sm"): bg.button("Live Demo").classes("q-btn-primary") bg.button("Source Code").classes("q-btn-outline") bg.build("portfolio-website") Blog Platform ------------- A complete blog with admin features: .. code-block:: python import badgui as bg def create_header(): \"\"\"Create blog header.\"\"\" with bg.row().classes("bg-white shadow-1 q-pa-md justify-between items-center"): bg.link("Tech Blog", "/").classes("text-h5 text-primary text-weight-bold no-underline") with bg.row().classes("q-gutter-md"): bg.link("Home", "/").classes("text-grey-8 no-underline") bg.link("Categories", "/categories").classes("text-grey-8 no-underline") bg.link("About", "/about").classes("text-grey-8 no-underline") bg.input(placeholder="Search...").classes("").props("outlined dense") def create_post_card(title, excerpt, date, category): \"\"\"Create blog post card.\"\"\" with bg.column().classes("bg-white rounded shadow-2 q-pa-lg"): bg.label(category).classes("text-caption text-primary text-weight-bold q-mb-sm") bg.label(title).classes("text-h6 q-mb-md") bg.label(excerpt).classes("text-body2 text-grey-7 q-mb-md") with bg.row().classes("justify-between items-center"): bg.label(date).classes("text-caption text-grey-6") bg.button("Read More").classes("q-btn-sm q-btn-primary") # Home Page with bg.page("/", "HomePage", "Tech Blog"): create_header() # Featured post with bg.column().classes("bg-gradient-to-r from-purple-600 to-blue-600 text-white q-pa-xl text-center"): bg.label("Featured Article").classes("text-caption q-mb-md opacity-80") bg.label("The Future of Web Development").classes("text-h3 q-mb-md") bg.label("Exploring emerging technologies and trends shaping the web").classes("text-h6 q-mb-lg opacity-90") bg.button("Read Article").classes("q-btn q-btn-lg q-btn-white text-primary") # Recent posts with bg.column().classes("q-pa-xl"): bg.label("Recent Posts").classes("text-h4 q-mb-lg") with bg.row().classes("q-col-gutter-lg"): posts = [ ("Getting Started with Vue.js 3", "Learn the basics of Vue.js 3 and its composition API...", "March 15, 2025", "Vue.js"), ("Python Best Practices", "Write cleaner, more maintainable Python code...", "March 12, 2025", "Python"), ("CSS Grid vs Flexbox", "When to use Grid and when to use Flexbox...", "March 10, 2025", "CSS"), ("API Design Principles", "Building RESTful APIs that developers love...", "March 8, 2025", "Backend") ] for title, excerpt, date, category in posts: with bg.column().classes("col-12 col-md-6 col-lg-3"): create_post_card(title, excerpt, date, category) # Single Post Page with bg.page("/post/:slug", "PostPage", "Blog Post"): create_header() with bg.column().classes("q-pa-xl max-width-md mx-auto"): # Post header bg.label("Vue.js").classes("text-caption text-primary text-weight-bold q-mb-sm") bg.label("Getting Started with Vue.js 3").classes("text-h3 q-mb-md") with bg.row().classes("text-grey-6 q-mb-xl"): bg.label("Published on March 15, 2025") bg.label(" • ") bg.label("5 min read") # Post content bg.label("Introduction").classes("text-h5 q-mb-md q-mt-lg") bg.label("Vue.js 3 brings many exciting features...").classes("text-body1 q-mb-lg") bg.label("Key Features").classes("text-h5 q-mb-md q-mt-lg") bg.label("The Composition API is one of the biggest additions...").classes("text-body1 q-mb-lg") # Related posts bg.label("Related Posts").classes("text-h5 q-mb-md q-mt-xl") with bg.row().classes("q-col-gutter-md"): for i in range(2): with bg.column().classes("col-12 col-md-6"): create_post_card("Related Post", "Short excerpt...", "March 10, 2025", "Vue.js") bg.build("blog-platform") Running the Examples -------------------- To generate and run any of these examples: 1. **Save the code** to a Python file (e.g., ``dashboard.py``) 2. **Generate the project**:: python dashboard.py 3. **Run the project**:: cd dashboard-app # or whatever you named it npm install npm run dev 4. **Open in browser**: Navigate to ``http://localhost:9000`` Customization Tips ------------------ All examples can be customized by: 1. **Modifying styles**: Update CSS classes and inline styles 2. **Adding components**: Insert additional BadGUI components 3. **Changing layouts**: Reorganize with different row/column structures 4. **Updating content**: Replace placeholder text with real content 5. **Adding pages**: Create additional routes for more functionality The generated Vue.js projects are fully editable, so you can continue development with standard Vue.js tools and practices.