Vue.js Forge
Workshops Swag
Previous Events

Smooth as Butter: From Zero To Deployed Vue 3 + VITE + ButterCMS App

1:00 PM UTC(3 h)

Participants will clone, run, customize, and extend a beautiful, fully-functional Vue 3 + VITE app powered by ButterCMS, a lightning-fast headless CMS that’s consistently among the highest-ranked CMS solutions on G2. Before the end of the session, participants will deploy their apps to a free Vercel account, giving them an attractive addition to their online portfolios.

Team
Maria Violante
Maria Violante
Sold Out
July 27
Online Classroom

Who this is for

All developers

Workshop Overview

What will the attendees learn

Participants will clone, run, customize, and extend a beautiful, fully-functional Vue 3 + VITE app powered by ButterCMS, a lightning-fast headless CMS that’s consistently among the highest-ranked CMS solutions on G2. Before the end of the session, participants will deploy their apps to a free Vercel account, giving them an attractive addition to their online portfolios.

Agenda

Introduction and Setup (15 mins):

  • 10 minute presentation:
  • Summarize workshop goals
  • Intro to Butter: Get tokens, clone and run projects. Intro to Butter dashboard.
  • 5 minute coding session. Goals:
  • Make a change to landing page in Butter. Verify change is being pulled into app.
  • Create a blog post in Butter. Verify new post is being pulled into app.

Model a New Page Type (20 mins):

  • 10 minute presentation:
  • Create Gallery Project Page Type, complete with:
  • SEO Component (title, meta description)
  • Headline
  • Description
  • Image/Media Field
  • Link to Repo
  • Collection with Collection Items (Technologies + Languages)
  • Build out 3 pages with sample content
  • Print to console with butter.page.list() and butter.page.retrieve() to demonstrate json response.
  • 10 minute coding session

Break (10 mins)

Integrate Project Detail View (30 mins)

  • 10 minute presentation:
  • Create Project Detail Page in Vue + VITE + test links
  • 20 minute coding session.

Integrate Project List View (15 mins)

  • 5 minute presentation:
  • Create All Projects List View page in Vue + VITE + test links
  • 10 minute coding session:

Break (10 mins)

Add Project Gallery Component to Landing Page (25 mins)

  • 10 minute presentation:
  • Create a new Project Gallery component in Butter with some header text and reference field links to 1 or more project pages.
  • Add a new component to the landing page, pulling in Project Gallery page as items.
  • Link button at bottom to list view for all projects.
  • Add link to navigation menu if time via Butter Collection.
  • 15 min coding session.

Deploy Projects (5 mins)

  • 2 minute presentation (Deploy to vercel)
  • 3 minutes coding session

Outro: 5 mins

Q + A: 15 mins

Meet the Instructors

Picture of Maria Violante

Maria Violante

Budding pythonista and Django enthusiast, currently working with ButterCMS.

Vue.js Forge
Social Media:
Visit Our Previous Events:
Vue.js NationNuxt Nation
© All rights reserved. Made with ❤️ by BitterBrains, Inc.